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+iview分页组件的封装
Nov 17 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
DIY实用性框形天线
2021/03/02 无线电
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JS判定是否原生方法
2013/07/22 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
简单介绍Python中的struct模块
2015/04/28 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python生成器用法实例详解
2019/11/22 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
python-地图可视化组件folium的操作
2020/12/14 Python
介绍一下你对SOA的认识
2016/04/24 面试题
《我的第一本书》教学反思
2014/02/15 职场文书
大型活动组织方案
2014/05/10 职场文书
人事任命通知
2015/04/20 职场文书
基层工作经历证明
2015/06/19 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
公司新员工欢迎词
2015/09/30 职场文书
golang中的空接口使用详解
2021/03/30 Python
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技