【webpack】关于自己配置webpack遇到的路由访问失败的问题

259 阅读1分钟

之前配置好webpack的vue项目后只测试了一级路由,今天使用到多级路由的时候发现访问出现了404,

image.png

详细查看网络请求以后发现请求地址不对,因为打包出来的文件没有home文件夹,

image.png

(打包后的文件)

image.png

排查后发现是index.html的请求路径不对,这里使用的是相对路径,所以带上了一级路由的路径,所以应该改为绝对路径。

image.png

解决: 可以在output里面添加一个publicPath:"/",这样请求的路径前都会带上"/",

  output: {
    ...
    publicPath: '/'
  },

或者在html-webpack-plugin插件里面配置base属性,也可以在请求前添加一个"/"

    new HtmlWebpackPlugin({
       base: `/`,
    }),