Vue 打包的静态文件不能直接运行的原因及解决办法


Posted in Vue.js onNovember 19, 2020

问题

吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的。然而在使用 npm run build 打包项目时,却发现打包好的项目在浏览器中直接打开好像什么都没有?

原因

查看了一下打包后的 index.html 源码,终于发现了一个重要的点:

Vue 打包的静态文件不能直接运行的原因及解决办法

所有涉及到路径的地方全都是以 / 开头的

下面是吾辈打包后生成的 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 属性的值由 / 改为 ./

Vue 打包的静态文件不能直接运行的原因及解决办法

修改文件 _/build/utils.js_,在插件 ExtractTextPlugin 中添加 publicPath: '../../'

Vue 打包的静态文件不能直接运行的原因及解决办法

那么,使用 npm run build 重新打包后的静态文件应该就可以直接打开啦

以上就是Vue 打包的静态文件不能直接运行的原因及解决办法的详细内容,更多关于vue 打包静态文件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
深入了解Vue3模板编译原理
Nov 19 #Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
详解Vue的mixin策略
Nov 19 #Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
You might like
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
详解vue中axios的封装
2018/07/18 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
python中的二维列表实例详解
2018/06/19 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python输出pdf文档的实例
2020/02/13 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
浅谈HTML5 & CSS3的新交互特性
2016/07/19 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
我的小天地教学反思
2014/04/30 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书