vue实现打包添加二级目录
vue打包添加二级目录
找到config下面的index.js文件
在build中修改assetsSubDirectory这行static前面就是你要添加的二级目录的名称
打包后你会发现http://127.0.0.1:8080访问不到加上新添加的二级目录
http://127.0.0.1:8080/cc0/owe也不行
原因就是owe文件下缺少index.html文件
把根目录下的index文件复制到owe下面就ok了
*注意 每次打包项目后都要重新复制index.html到owe文件下
打包vue 项目到非根目录（二级目录），打包到根目录图片空白
需求-打包项目之后再http://www.pcweb.com/wt/web，http://www.pcweb.com/wt/cms展示网站
由于有二个项目 实现的时候有部分的区别 总体不是很大
首先
1、由于不是根目录打包，所以需要进一步改动配置文件
router文件中index.js 添加base:’/wt/web’根据自己的需要进行配置
2、由于我这边一个项目包含了移动和pc两端的代码 所以根据屏幕跳转到不同的页面 也要加上‘、wt/web’不然无法找到路径
3、项目中img的路径最好不用使用‘/static’ 类似如此的绝对路径 使用会报出图片404 找不到该路径
其次
这是普通的vue项目 进行打包到http://www.pcweb.com/wt/cms
1、修改vue.config.js publicPath:’/wt/cms’
2、router文件中index.js 加入base：‘/wt/cms/’
如果是正常的根目录打包 如http://www.pcweb.com/
1、router文件 index.js 不需要配置base
2、vue.config.js publicPath:’./'即可
3、如果有部分图片不显示 修改build 中utils.js___ publicPath: ‘…/…/’
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2.0 中使用transition实现动画效果使用心得
这篇文章主要介绍了vue2.0 中使用transition实现动画效果使用心得，本文通过案例知识给大家介绍的非常详细，需要的朋友参考下吧2018-08-08
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据。这篇文章主要给大家介绍Vue el-autocomplete远程搜索下拉框并实现自动填充功能，感兴趣的朋友一起看看吧2019-10-10
这篇文章主要介绍了vue歌曲进度条demo，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue中引用swiper轮播插件的方法,在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里。具体实例代码大家跟随脚本之家小编一起看看吧2018-08-08
这篇文章主要介绍了关于vue-i18n在单文件js中的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了keep-alive保持组件状态的方法，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-12-12
VueUse提供了一个丰富且强大的Hooks库,可以帮助开发者快速实现各种功能,提高开发效率,本文来详细的介绍一下,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
Vue 实现对quill-editor组件中的工具栏添加title
这篇文章主要介绍了Vue 实现对quill-editor组件中的工具栏添加title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue3+vite中使用import.meta.glob的操作代码
在vue2的时候，我们一般引入多个js或者其他文件，一般使用 require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个功能用import.meta.glob来引入多个，单个的文件，下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了vue双向绑定数据限制长度的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论