problem description
the history mode of vue-router is used in the vue+webpack project to implement nested routing. The packaged bundle file cannot be loaded after the page is refreshed under the secondary route.
network app.bundle.js
the correct request should be localhost:8080/app.bundle.js .
related codes
paste the configuration file.
this is the basic configuration file for 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"
}
]
}
};
this is the defined route:
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
}
]
}
]
})
what result do you expect? What is the error message actually seen?
because I do not reference the app.bundle.js file directly in index.html, but use HtmlWebpackPlugin to use index.html as a template and add the tag referencing the app.bundle.js file when exporting. I feel that the path referencing resources is wrong. src= "app.bundle.js should be a relative path, so the file can not be found at this time, is there any way to change this path? If my idea is wrong, is there any way to make the nested routing page display normally after refreshing?