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实现坐标拾取器功能示例
Nov 18 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
详解Vue的options
May 15 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue Mint UI mt-swipe的使用方式
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
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python网络编程之五子棋游戏
2020/05/14 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
大学生求职自我评价
2014/01/16 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
2014年党支部工作总结
2014/11/13 职场文书
统计工作个人总结
2015/03/03 职场文书
年度考核表个人总结
2015/03/06 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js