VueJS + Webpack 开发服务器无法热重载 url 子路径

Posted

技术标签:

【中文标题】VueJS + Webpack 开发服务器无法热重载 url 子路径【英文标题】:VueJS + Webpack Dev Server not able to hot reload url subpaths 【发布时间】:2019-02-13 21:45:39 【问题描述】:

我的应用程序运行在子目录http://localhost:8080/admin_suffix

suffix 是一个 ENV 变量,我可以在 .env 文件中更改和定义它。

一旦我运行 webpack 开发服务器,访问 http://localhost:8080/admin_suffix 就可以了。

单击 SPA 中指向其他子路径的超链接也可以。例如,我可以导航到http://localhost:8080/admin_suffix/subdirectory

但是,当我在http://localhost:8080/admin_suffix/subdirectory 上点击重新加载时,我会收到一个错误“Cannot GET /admin_suffix/subdirectory”

我也无法直接在浏览器中输入子路径来加载页面。只有 ``http://localhost:8080/admin_suffix` 有效。

我的配置如下:

webpack.base.config.js:

  entry: 
    main: './src/main',
    vendors: './src/vendors'
  ,
  devServer: 
        host: '0.0.0.0',
        disableHostCheck: true
  ,
  output: 
    path: path.join(__dirname, '../dist')
  

webpack.dev.config.js:

module.exports = merge(webpackBaseConfig, 
  output: 
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  
);

src/main.js:

const RouterConfig = 
    mode: 'history',
    routes: Routers,
    base: '/admin_suffix/'

【问题讨论】:

您在“历史”模式下使用 Vue。您是否完全按照他们文档中的所有步骤进行操作?见这里:router.vuejs.org/guide/essentials/history-mode.html 【参考方案1】:

webpack.base.config.js 中启用devServer.historyApiFallback

devServer: 
  historyApiFallback: true,
  // ...
,

这会将webpack-dev-server 配置为在找不到路由时回退到index.html (404)。

Vue 应用程序和路由器是从主页 (index.html) 初始化的,因此在子路由上刷新页面通常会导致 404,因为尚未设置路由器。但是,上面提到的后备配置将导致 index.html 被提供服务,从而允许设置路由器并随后完成子路由。

【讨论】:

以上是关于VueJS + Webpack 开发服务器无法热重载 url 子路径的主要内容,如果未能解决你的问题,请参考以下文章

VueJS 和 Webpack:构建项目无法访问 ENV var

无法使用 Webpack 运行 Vuejs:未找到组件依赖项

无法使用 vuejs2 和 webpack 嵌入自定义字体

我无法通过 symfony/webpack-encore 使用 Jest 和 Vuejs 运行测试

vuejs:vue-cli webpack 模板无法解析 sass 导入

vuejs:vue-cli webpack模板无法解析sass导入