首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

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

2018年10月23日 发布 阅读(444) 作者:懒炖
问题:vuejs使用二级路由时,静态资源找不到,路径不对,如下图

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

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

router.js
  1. import Index from "./pages/index/index.vue";
  2. import Login from "./pages/login/login.vue";
  3. export default {
  4. mode: "history",
  5. routes: [
  6. // 首页
  7. {
  8. path: "/",
  9. component: Index,
  10. meta:{
  11. title: '小牛在线 — 中国领先的互联网金融平台_专业P2P网贷平台'
  12. }
  13. },
  14. // 登录
  15. {
  16. path: "/user/login",
  17. component: Login,
  18. meta:{
  19. title: '我的'
  20. }
  21. }
  22. ]
  23. };
webpack.dev.conf.js
  1. ...省略...
  2. // 模式
  3. mode: "development",
  4. // 开发调试
  5. devtool: "cheap-module-eval-source-map",
  6. devServer: {
  7. // 内容路径
  8. contentBase: path.join(__dirname, "../src"),
  9. // gzip压缩
  10. compress: true,
  11. // 端口
  12. port: 9000,
  13. // 代理
  14. proxy: {
  15. "/api": {
  16. target: "http://localhost:3000",
  17. pathRewrite: { "^/api": "" }
  18. }
  19. },
  20. historyApiFallback: true,// 如果为 true ,页面出错不会弹出 404 页面
  21. },
  22. // 输出=>https://webpack.docschina.org/configuration/output/
  23. output: {
  24. filename: "js/[name].[hash].js",
  25. path: path.resolve(__dirname, "../dist"),
  26. },
  27. ...省略...
解决:

网上没办法,就还是得自己解决。最后把注意力放在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属于为绝对路径,问题解决

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

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

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •