Vue 打包的静态文件不能直接运行的原因及解决办法
更新时间：2020年11月19日 11:24:44 作者：rxliuli
这篇文章主要介绍了Vue 打包的静态文件不能直接运行的原因及解决办法，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
问题
吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？
原因
查看了一下打包后的 index.html 源码，终于发现了一个重要的点：
所有涉及到路径的地方全都是以 / 开头的
下面是吾辈打包后生成的 dist 目录
dist:.
│ index.html
│
└─static
├─css
│ app.b7bce283257fbd427fb1dc3fea80cee1.css
│ app.b7bce283257fbd427fb1dc3fea80cee1.css.map
│
├─fonts
│ MaterialIcons-Regular.012cf6a.woff
│ MaterialIcons-Regular.570eb83.woff2
│ MaterialIcons-Regular.a37b0c0.ttf
│ MaterialIcons-Regular.e79bfd8.eot
│
└─js
app.58cce746b2fe4ac2f2b9.js
app.58cce746b2fe4ac2f2b9.js.map
manifest.2ae2e69a05c33dfc65f8.js
manifest.2ae2e69a05c33dfc65f8.js.map
vendor.a32972498ed8de656202.js
vendor.a32972498ed8de656202.js.map
这下很清楚了，vue-cli 生成的模板项目打包后的文件默认需要放到静态资源服务器上，而且还必须是根目录！这很不好，很糟糕，所以需要修改配置。
解决方案
修改文件 _/config/index.js_，将 build.assetsPublicPath 属性的值由 / 改为 ./
修改文件 _/build/utils.js_，在插件 ExtractTextPlugin 中添加 publicPath: '../../'
那么，使用 npm run build 重新打包后的静态文件应该就可以直接打开啦
以上就是Vue 打包的静态文件不能直接运行的原因及解决办法的详细内容，更多关于vue 打包静态文件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue如何给页面增加url前缀问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
在Web应用程序中,实现拖拽和排序功能是非常常见的需求,本文为大家介绍了如何使用Vue来实现一个简单但功能强大的拖拽与排序功能,感兴趣的小伙伴可以参考下2023-10-10
这篇文章主要给大家介绍了关于vue组件的路由高亮问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
最近在研究框架，也仔细用了Vue3一些功能，所以本文就来和大家聊聊Vue3如何实现优雅的监听localStorage的变化，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
这篇文章主要介绍了浅谈Vue.set实际上是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue3在css中使用js变量及其原理解读,结合实例代码介绍了vue3中css使用script中定义的变量的方法，本文给大家介绍的非常详细，需要的朋友可以参考下2023-09-09
在本篇文章里小编给大家整理的是关于vue倒计时刷新页面不会从头开始的解决方法，需要的朋友们参考下。2020-03-03
计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的，这篇文章主要介绍了vue 过滤、模糊查询（计算属性 computed）,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中如何给静态资源增加路由前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论