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中利用three.js实现全景图的完整示例
Dec 07 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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/04/14 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
python字符串的常用操作方法小结
2016/05/21 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python读取并写入mat文件的方法
2019/07/12 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
优秀生推荐信范文
2013/11/28 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
电钳工人个人求职信
2014/05/10 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
护理培训心得体会
2016/01/22 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
win10搭建配置ftp服务器的方法
2022/08/05 Servers
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers