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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue实现登陆页面开发实践
May 30 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
PHP初学者头疼问题总结
2006/07/08 PHP
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP之短标签开启设置
2013/06/17 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
手机端转换rem适应
2017/04/01 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
vue ssr 指南详读
2018/06/29 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
汇源肾宝广告词
2014/03/20 职场文书
环卫工作汇报材料
2014/10/28 职场文书
初中生物教学反思
2016/02/20 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript