vue-cli4如何打包静态资源到指定目录
更新时间：2022年09月01日 09:35:34 作者：Amorleon
这篇文章主要介绍了vue-cli4打包静态资源到指定目录方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
打包静态资源到指定目录
在最近开发工作中，我打包的 dist 文件夹下，vue-cli4 打包（npm run build）的静态资源全部都平铺展开在该文件夹下，看着很别扭，于是想打包到 static 文件夹下。
vue-cli4 执行打包命令时，默认打包的位置是dist文件夹下，不会自动打包为一个模块（文件夹）。
解决
在 vue.config.js 文件中设置 assetsDir 指定打包的目录为根目录下的 static 文件夹，就会在 dist 文件夹下自动生成一个新的文件夹 static 来存放打包的静态资源。
设置之后打包的文件目录为：
说明：文件夹下的 js 和 json 文件夹是我写在 public 文件夹下的模块用于 axios 请求本地数据，打包时会直接打包到 dist 文件夹下。
vue-cli打包访问静态资源404
使用vue-cli生产打包，把代码放到服务器上访问的时候，不少同学会看到页面一片空白，打开控制台，会发现是某些资源文件找不到，如图：
其实这里是因为vue-cli的webpack打包配置静态文件访问路径不对，配置文件路径如图：
在这个文件下面找到生产(build)配置：
要解决静态文件访问路径问题只需要修改配置中的assetsPublicPath字段即可。
如果你的服务器静态文件路径是这样的：
将路径写成这样即可访问静态资源：
资源访问成功状态：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
这篇文章主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见，下面就来详细的介绍一下2018-11-11
完美解决element-ui的el-input设置number类型后的相关问题
这篇文章主要介绍了完美解决element-ui的el-input设置number类型后的相关问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue 移动端记录页面浏览位置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要是带领大家分析$mount的相关知识，需要的朋友一起学习吧2017-12-12
这篇文章主要介绍了vue 注释template中组件的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue项目中icon乱码的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家介绍了Vue3项目中reset.scss模板使用导入示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了vue动态路由匹配和路由懒加载,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
本文主要介绍了如何监听Vue项目报错的4种方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了如何使用vue3实现小程序手机号一键登录功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
最新评论