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:未找到组件依赖项
我无法通过 symfony/webpack-encore 使用 Jest 和 Vuejs 运行测试