webpack 打包vue

简介: webpack 打包vue

忙忙碌碌的过了一个月的加班通宵的生活,这几天开始慢慢的有一点空了,就来赶紧更新文章。之前写过一篇文章是关于webpack 打包问题的,

但不知什么时候自己好像给误删了。不管了,就重新写一下吧。

1、关于打包配置

config/index.js

工程项目下config下的index.js 文件,找到下图中的属性
config/index.js

图中的红框的是静态文件的公共路径。如果你放在一个项目文件夹下,你的static文件夹在xxx文件夹下运行,那么你的文件路径就应改成 /xxx/ 这样打包之后会显示文件的真是路径。
2、关于配置文件对了之后,仍出现路径不对的情况下。

我的项目都是真是好用的,具体需要大家实际情况而定,我这种情况是出现在使用 v-bind 中,对路径进行动态转换的时候。
下面是我的工程结构

工程结构

src/pages/qcList.vue

在开发环境下,图片都是正常加载的。但是当打包之后文件路径就会多出一个层级,后来研究发现,对于这种动态的路径,直接引用他的static 下的路径就完全可以。如下图:
image.png

改成这样既可。此后在npm run build 就没问题了。
今天就先整理到这了。后续陆续跟新。一个小白在成长的路上不断成长,如有不足之处,敬请大家批评指正!!!

相关文章
|
2月前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
240 59
|
2月前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
139 57
|
1月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
72 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
134 60
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
1月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
1月前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
116 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
1月前
|
JavaScript 前端开发
|
1月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
下一篇
无影云桌面