在Vue JS和Framework7中使用浏览器同步

时间:2019-07-15 07:57:42

标签: vue.js webpack browser-sync html-framework-7

我使用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.htmlapp.vueapp.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错误。有什么问题吗?

任何帮助将不胜感激。

1 个答案:

答案 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
      }
    )
  ]
}