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字段即可。
如果你的服务器静态文件路径是这样的:
将路径写成这样即可访问静态资源:
资源访问成功状态:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定
这篇文章主要介绍了浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,需要的朋友可以参考下2022-12-12vue element-ui里的table中表头与表格出现错位的解决
这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08Vue整合Node.js直连Mysql数据库进行CURD操作过程详解
这篇文章主要给大家分享Vue整合Node.js,直连Mysql数据库进行CURD操作的详细过程,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下2023-07-07vue中使用elementui实现树组件tree右键增删改功能
这篇文章主要介绍了vue中使用elementui实现对树组件tree右键增删改功能,右击节点可进行增删改,对节点数据进行模糊查询功能,本文给大家分享了完整代码,需要的朋友可以参考下2022-08-08
最新评论