我使用vue js 2.0和framework7创建了PWA,还使用Webpack进行捆绑。我想使用浏览器同步来共享我的项目。
我在webpack.confg文件中使用了此配置:
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
在src/
中,我有一些基本文件,例如index.html
,app.vue
,app.js
。
使用npm run dev命令后,我看到以下结果:
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
此后,localhost:3000
在我的浏览器中打开并说browsersync: connected
,但它显示了空白页。
同样,在浏览器中输入网站路径(http://localhost:3000/en/#!/login
)后,它显示了Cannot Get /en
错误。有什么问题吗?
任何帮助将不胜感激。
答案 0 :(得分:0)
根据您的评论,您似乎也在使用webpack-dev-server
。在这种情况下,您可以代理它:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}