运行npm run dev，vuejs二级路由，刷新页面静态资源404(路径不对)

2018年10月23日发布阅读(4897) 作者：Jerman

问题：vuejs使用二级路由时，静态资源找不到，路径不对，如下图

项目基于webpck4 + vue2 + vuex，无论百度、google，各种说法的都有，然而木有用

试了官网的关于嵌套路由的代码，刷新一样有这个问题

router.js

import Index from "./pages/index/index.vue";
import Login from "./pages/login/login.vue";
export default {
    mode: "history",
    routes: [
        // 首页
        {
            path: "/",
            component: Index,
            meta:{
                title: '小牛在线 — 中国领先的互联网金融平台_专业P2P网贷平台'
            }
        },
        // 登录
        {
            path: "/user/login",
            component: Login,
            meta:{
                title: '我的'
            }
        }
    ]
};

webpack.dev.conf.js

...省略...
   // 模式
    mode: "development",
    // 开发调试
    devtool: "cheap-module-eval-source-map",
    devServer: {
        // 内容路径
        contentBase: path.join(__dirname, "../src"),
        // gzip压缩
        compress: true,
        // 端口
        port: 9000,
        // 代理
        proxy: {
            "/api": {
                target: "http://localhost:3000",
                pathRewrite: { "^/api": "" }
            }
        },
        historyApiFallback: true,// 如果为 true ，页面出错不会弹出 404 页面
    },
    // 输出=>https://webpack.docschina.org/configuration/output/
    output: {
        filename: "js/[name].[hash].js",
        path: path.resolve(__dirname, "../dist"),
    },
...省略...

解决：

网上没办法，就还是得自己解决。最后把注意力放在webpack生成js路径上，即html-webpack-plugin插件

查阅html-webpack-plugin文档，会发现html的js路径是由webpack的output决定的，继续查阅output文档，发现有publicPath属性用于设置cdn的路径。
如果把publicPath设为/绝对路径会怎样？重新运行npm run dev

设置webpack.dev.conf.js文件的output的publicPath属于为绝对路径，问题解决

// 输出=>https://webpack.docschina.org/configuration/output/
    output: {
        filename: "js/[name].[hash].js",
        path: path.resolve(__dirname, "../dist"),
        publicPath:'/'
    },

html-webpack-plugin参考：https://webpack.docschina.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx

output参考： https://webpack.docschina.org/concepts/output/#src/components/Sidebar/Sidebar.jsx