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用mixin合并重复代码的实现
Nov 27 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Vuex的API文档说明详解
2020/02/05 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
仓管员岗位职责范本
2015/04/01 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
如何使用Python实现一个简易的ORM模型
2021/05/12 Python