node.js BrowserSync 无法获取 /
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28962528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BrowserSync Cannot GET /
提问by Funny Frontend
I only have installed NodeJS and BrowserSync with this command:
我只用这个命令安装了 NodeJS 和 BrowserSync：
npm install -g browser-sync
After I use this command to start the server:
在我使用此命令启动服务器后：
C:\xampp\htdocs\browser_sync
λ browser-sync start --server
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.223:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.223:3001
--------------------------------------
[BS] Serving files from: ./
And I get the following error: Cannot GET /
我收到以下错误：无法获取 /
I'm confused because I want to use BrowserSync with my Laravel project.
我很困惑，因为我想在我的 Laravel 项目中使用 BrowserSync。
Where should I install BrowserSync?
我应该在哪里安装 BrowserSync？
Thanks.
谢谢。
采纳答案by Kyle Marimon
Using BrowserSync as a server only works if you're running a static site, so PHP won't work here.
使用 BrowserSync 作为服务器仅在您运行静态站点时才有效，因此 PHP 在这里不起作用。
Looks like you're using XAMPP to serve your site, you can use BrowserSync to proxy your localhost.
看起来您正在使用 XAMPP 来为您的站点提供服务，您可以使用 BrowserSync 来代理您的本地主机。
Example:
例子：
browser-sync start --proxy localhost/yoursite
References:
参考：
回答by daGo
Because it works only with index.html by default, for example:
因为它默认只适用于 index.html，例如：
linux@linux-desktop:~/Templates/browsersync-project$ ls
brow.html css
linux@linux-desktop:~/Templates/browsersync-project$ browser-sync start --server --files '.'
Expected result:
预期结果：
Cannot GET/
In order to see your static web-page in the web-browser instead of that annoying message you have to rename a file brow.htmlto index.html. This will solve Cannot GET/problem.
为了在网络浏览器中看到您的静态网页而不是那条烦人的消息，您必须将文件重命名brow.html为index.html. 这将解决Cannot GET/问题。
P.S. Where you are installing a browser-sync doesn't matter. Just type npm install -g browser-syncwhatever directory you are in, and after double check browser-sync --version.
PS 你在哪里安装浏览器同步并不重要。只需输入npm install -g browser-sync您所在的任何目录，然后仔细检查browser-sync --version.
回答by Daniel Tonon
This articlewas extreamly helpful for getting browsersync to work with a PHP site.
这篇文章对于让 browsersync 与 PHP 站点一起工作非常有帮助。
These are what the configurations for both Grunt and Gulp should look like (taken from the article)
这些是 Grunt 和 Gulp 的配置应该是什么样子的（摘自文章）
Grunt
咕噜声
You will need the grunt-phpplugin
您将需要grunt-php插件
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch: {
php: {
files: ['app/**/*.php']
}
},
browserSync: {
dev: {
bsFiles: {
src: 'app/**/*.php'
},
options: {
proxy: '127.0.0.1:8010', //our PHP server
port: 8080, // our new port
open: true,
watchTask: true
}
}
},
php: {
dev: {
options: {
port: 8010,
base: 'path/to/root/folder'
}
}
}
});
grunt.registerTask('default', ['php', 'browserSync', 'watch']);
Gulp
吞咽
You will need the gulp-connect-phpplugin
您将需要gulp-connect-php插件
// Gulp 3.8 code... differs in 4.0
var gulp = require('gulp'),
php = require('gulp-connect-php'),
browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('php', function() {
php.server({ base: 'path/to/root/folder', port: 8010, keepalive: true});
});
gulp.task('browser-sync',['php'], function() {
browserSync({
proxy: '127.0.0.1:8010',
port: 8080,
open: true,
notify: false
});
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch(['build/*.php'], [reload]);
});
回答by Mr.Meshack
this if or grunt users, I know gulp have different settings, have your local server setup but still not working, comment out or delete this line
如果或 grunt 用户，我知道 gulp 有不同的设置，设置了本地服务器但仍然无法正常工作，注释掉或删除此行
//server: 'http://localhost/yoursiterootfolder/'
add this line
添加这一行
proxy: "http://localhost/yoursiterootfolder/"
Change "yoursitefolder with actual folder your root folder not theme, template folder you are working on check out https://browsersync.io/docs/gruntfor more details Enjoy
使用实际文件夹更改“yoursitefolder，您的根文件夹不是主题，您正在处理的模板文件夹，请查看https://browsersync.io/docs/grunt了解更多详细信息享受
回答by alfonsovc15
Review Documentation: By default, the index file of the project, for example, can be index.html, but if it has a different name you must specify it with the following flag indicated in the documentation:
查看文档：默认情况下，例如，项目的索引文件可以是 index.html，但如果它具有不同的名称，则必须使用文档中指示的以下标志指定它：
--index :Specify which file should be used as the index page
--index :指定应该使用哪个文件作为索引页
In my case:
就我而言：
browser-sync start --index"datalayer.html" --server --files "./*.*"
I hope I have helped you, see you.
希望对你有帮助，再见。
回答by sinrise
I got this to work without using gulp-php-connect. It seemed redundant if BrowserSync itself provides a proxy method. I'm using Gulp 4.0alpha.3 and the latest npm. I didn't bother trying to make the es2015 stuff work so instead of 'import' and 'export' I used the more traditional 'require' and 'exports.' and gulp default task. ('export default build' is much cleaner :D) The rest is "Gulp 4". This is minimal, SCSS precompilation and CSS injection. This is a step towards a larger solution but this seemed to be a challenging bit for a lot of people, including myself, to get going: PHP/XAMPP/SCSS seems like a common setup so I'm hoping this helps some people. This works exactly like using gulp-php-connect. Here's my entire gulpfile.js:
我在不使用 gulp-php-connect 的情况下让它工作。如果 BrowserSync 本身提供代理方法，这似乎是多余的。我正在使用 Gulp 4.0alpha.3 和最新的 npm。我没有费心让 es2015 的东西工作，所以我使用了更传统的 'require' 和 'exports' 而不是 'import' 和 'export'。并吞下默认任务。（'export default build' 更清晰：D）剩下的是“Gulp 4”。这是最小的，SCSS 预编译和 CSS 注入。这是朝着更大解决方案迈出的一步，但对于包括我自己在内的很多人来说，这似乎是一个挑战：PHP/XAMPP/SCSS 似乎是一个常见的设置，所以我希望这对某些人有所帮助。这与使用 gulp-php-connect 完全一样。这是我的整个 gulpfile.js：
const gulp = require('gulp');
const del = require('del');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const sourcemaps = require('gulp-sourcemaps');
const server = browserSync.create();
const paths = {
scss: {
src: './scss/admin.scss',
dest: './css/'
}
};
const clean = () => del(['dist']);
function scss() {
return gulp.src(paths.scss.src, { sourcemaps: true })
.pipe(sass())
.pipe(gulp.dest(paths.scss.dest));
}
function reload(done) {
server.reload();
done();
}
function serve(done) {
server.init({
injectChanges: true,
proxy: 'localhost:8100/',
port: 8080,
open: true,
notify: false
});
done();
}
const watch = () => gulp.watch('./scss/**/*.scss', gulp.series(scss, reload));
const build = gulp.series(clean, scss, serve, watch);
exports.build = build;
gulp.task('default', build);
回答by lofihelsinki
When answering a request for root /, browser-sync will look for index.htmlfile by default. If it doesn't exists, an error is sent instead.
响应 root 请求时，默认情况下/浏览器同步将查找index.html文件。如果它不存在，则改为发送错误。
The best way to change this behaviour is to make browser-sync responde with a directory listing instead of index.html.
更改此行为的最佳方法是使用目录列表而不是index.html.
browser-sync start --server --directory
This way you will get a directory listing of all the files in browser-sync's root directory instead of the error.
这样，您将获得浏览器同步根目录中所有文件的目录列表，而不是错误。
回答by Mahmoud Zalt
Make sure you are in the directory where the index.html file is. You most probably running that command from the root directory of your project and this will not run unless you specify the index path.
确保您位于 index.html 文件所在的目录中。您很可能从项目的根目录运行该命令，除非您指定索引路径，否则它将不会运行。
回答by Daniel Barde
BrowserSync only loads static files by default, if you want to use it to load a php file (index.php) you have to start the php server and then connect to it with browser sync via the proxy option.
BrowserSync 默认只加载静态文件，如果你想用它来加载一个 php 文件 (index.php)，你必须启动 php 服务器，然后通过代理选项使用浏览器同步连接到它。
You can achieve this with the following code. NB: This code goes into your webpack.config.js file.
您可以使用以下代码实现此目的。注意：此代码进入您的 webpack.config.js 文件。
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var Connect = require('gulp-php-connect');
// we create a serve object which we instantiate in
// webpacks plugins scope.
var Serve = function(){
Connect.server({
base: './public',
port: 9000,
keepalive: true
});
// return a new instance of browser sync
return new BrowserSyncPlugin({
proxy: 'localhost:9000',
port: 8080,
files: ['public/**/*', 'public/index.php']
});
}
Now within the plugins scope of your webpack config file you can instantiate our Serve object. NB: I'll suggest it being the last plugin you call.
现在在 webpack 配置文件的 plugins 范围内，您可以实例化我们的 Serve 对象。注意：我建议它是您调用的最后一个插件。
plugins: [
...,
new Serve()
]
I hope this was helpful.
我希望这可以帮到你。
回答by shane
You need to use the proxy option instead
您需要改用代理选项
browser-sync start --proxy yoursite.dev
