Vue3造轮子之打包构建配置二级目录方式
更新时间：2024年07月05日 10:18:07 作者：存梨
这篇文章主要介绍了Vue3造轮子之打包构建配置二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
项目代码打包初试
vue3 的项目是基于 vite 启动的，执行打包的时候，默认生成的 index.html 是加载根目录下的资源
如下图所示：
打包生成的文件，放在根目录下，是正常加载的。
但是当我们的项目需要配置在二级目录下时，资源的指向是有问题的。
此时会报 js 和 css 等文件找不到的错误。
配置项目二级目录
那么如何修改，让我们打包后的文件，带上二级目录的名字呢？
查询尤大的 vite库，看到关于公共文件的路径配置的一段话
这里的意思是我们在执行 build 的脚本时，在后面加一个配置指令即可
我根据这段提示，在 package.json 中做出如下修改
{
// 原本
"scripts": {
"dev": "vite",
"build": "vite build "
}
// 修改
"scripts": {
"dev": "vite",
"build": "vite build --base=/lemon/"
}
}
修改完成后再次执行 build 命令，可以发现我们的 index.html 的文件引入增加了二级目录的名称
如下图所示：
至此问题得到了解决！
总结
tips：多关注 Github 上的官方文档，有不懂的配置，一查就能查到了哦~
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于如何优雅地在vue中添加权限控制的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下2023-12-12
这篇文章主要介绍了前端vue中实现文件下载的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue.js实现二级菜单效果的具体方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了vue 动态修改a标签的样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
Vue之Element级联选择器多选传值以及回显方式(树形结构)
这篇文章主要介绍了Vue之Element级联选择器多选传值以及回显方式(树形结构)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
element-ui 中的 loading 加载功能,默认是全屏加载效果,设置局部,需要自定义样式或者修改样式,下面给大家分享实例代码,感兴趣的朋友跟随小编一起看看吧2024-05-05
vue3新特性中最重要、内容最多的组合式api,组合式api既可以解决之前vue2开发的痛点,又提升了性能,下面这篇文章主要给大家介绍了关于vue3 option api新玩法的相关资料,需要的朋友可以参考下2022-06-06
最新评论