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 就没问题了。
今天就先整理到这了。后续陆续跟新。一个小白在成长的路上不断成长,如有不足之处,敬请大家批评指正!!!

相关文章
|
19天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
23 0
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
31 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
21 0
|
3月前
|
JavaScript 前端开发
Vue使用Element实现增删改查+打包
Vue使用Element实现增删改查+打包
23 0
|
2月前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
2天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
10天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
26 0
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
71 0
|
1月前
|
缓存 JavaScript 前端开发
vue打包优化8大处理措施
vue-cli 生成的项目通常集成Webpack ,在打包的时候,需要webpack来做一些事情。这里我们希望它可以压缩代码体积,提高运行效率。