使用 vue-router 实现嵌套路由，在二级路由下刷新页面无法加载打包的bundle文件

Question

问题描述

在 vue+webpack 项目中使用 vue-router 的 history 模式实现嵌套路由，在二级路由下刷新页面后无法加载打包后的 bundle 文件。

报的错误如上图。查看 network 可以看到获取 app.bundle.js 文件的路径不对

正确的请求应该是 localhost:8080/app.bundle.js。

相关代码

贴一下配置文件。

这是 webpack.common.js，webpack 的基本配置文件。

module.exports = {
    entry: {
        app: [ './src/main.js' ]
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            vue$: 'vue/dist/vue.runtime.esm.js'
        },
        extensions: [
            '.js',
            '.jsx',
            '.vue',
            '.json'
        ],
        modules: [ 'node_modules' ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.BASE_URL': '"/"'
        }),
        new CleanWebpackPlugin([ 'dist' ]),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
            favicon: path.resolve(__dirname, 'public/favicon.ico')
        }),
        // 将定义的其它规则复制并应用到 .vue 文件里相应语言块
        new VueLoaderPlugin(),
        new ManifestPlugin()
    ],
    module: {
        noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                loader: 'vue-style-loader!css-loader!sass-loader'
            }
        ]
    }
};

这是定义的路由：

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: to => {
                return 'login'
            }
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/main',
            name: 'main',
            component: Layout,
            children: [
                {
                    path: 'companys',
                    name: 'companys',
                    component: Companys
                },
                {
                    path: 'users',
                    name: 'users',
                    component: Users
                }
            ]
        }
    ]
})

你期待的结果是什么？实际看到的错误信息又是什么？

因为我不是直接在 index.html 里引用 app.bundle.js 文件的，而是用 HtmlWebpackPlugin 将 index.html 作为模板，在输出的时候添加引用 app.bundle.js 文件的标签，我感觉是这个引用资源的路径出错了， src="app.bundle.js 应该是相对路径，所以这个时候会找不到文件，有没有办法改变这个路径呢？如果我的想法是错得话，那有什么方法能让嵌套路由页面刷新后仍然能够正常显示呢？