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

问题描述

在 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 应该是相对路径，所以这个时候会找不到文件，有没有办法改变这个路径呢？如果我的想法是错得话，那有什么方法能让嵌套路由页面刷新后仍然能够正常显示呢？