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

相关文章
|
6天前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
32 13
|
12天前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
19 1
|
16天前
|
前端开发 JavaScript API
|
23天前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
83 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
26天前
|
JavaScript
VUE——自动打包并生成dist.zip压缩包
VUE——自动打包并生成dist.zip压缩包
26 0
VUE——自动打包并生成dist.zip压缩包
|
7天前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
19 0
|
8天前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
26 0
|
9天前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
1月前
|
JavaScript 前端开发 CDN
webpack打包发布~
【8月更文挑战第7天】
30 1
|
22天前
|
JavaScript 算法 数据安全/隐私保护
Vue 打包 Error: error:0308010C:digital envelope routines::unsupported
Vue 打包 Error: error:0308010C:digital envelope routines::unsupported
28 0
下一篇
DDNS