vue实现打包添加二级目录

 更新时间:2024年07月05日 10:12:46   作者:MrLi-2018  
这篇文章主要介绍了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: ‘…/…/’

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-router路由跳转问题 replace

    vue-router路由跳转问题 replace

    这篇文章主要介绍了vue-router路由跳转问题 replace,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue-devtools的安装和使用步骤详解

    vue-devtools的安装和使用步骤详解

    在本篇文章中小编给大家整理的是一篇关于vue-devtools安装使用的相关知识点内容,有需要的朋友们可以学习下。
    2019-10-10
  • vue+iview实现手机号分段输入框

    vue+iview实现手机号分段输入框

    这篇文章主要为大家详细介绍了vue+iview实现手机号分段输入框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 利用vue3+threejs仿iView官网大波浪特效实例

    利用vue3+threejs仿iView官网大波浪特效实例

    最近好几个vue项目都是用ivew作为UI框架,所以下面这篇文章主要给大家介绍了关于如何利用vue3 + threejs仿iView官网大波浪特效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • TypeScript踩坑之TS7053的问题及解决

    TypeScript踩坑之TS7053的问题及解决

    这篇文章主要介绍了TypeScript踩坑之TS7053的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue动态路由匹配和路由懒加载多种方法详解

    vue动态路由匹配和路由懒加载多种方法详解

    这篇文章主要介绍了vue动态路由匹配和路由懒加载,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • element 穿梭框性能优化的实现

    element 穿梭框性能优化的实现

    本文主要介绍了element 穿梭框性能优化,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue的ElementUI form表单如何给label属性字符串中添加空白占位符

    vue的ElementUI form表单如何给label属性字符串中添加空白占位符

    这篇文章主要介绍了vue的ElementUI form表单如何给label属性字符串中添加空白占位符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解Vue3 中的计算属性及侦听器

    详解Vue3 中的计算属性及侦听器

    这篇文章主要介绍了详解Vue3 中的计算属性及侦听器,文章围绕主题的相关资料展开详细的内容介绍,具有一定的参考价值,需要的朋友可以看下一下
    2022-08-08
  • Vue热更新出现内存溢出的解决方法

    Vue热更新出现内存溢出的解决方法

    开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了,这时候产生了一个问题,在发布项目的时候,会出现Vue热更新出现内存溢出的问题,所以本文给大家介绍了Vue热更新出现内存溢出的解决方法,需要的朋友可以参考下
    2024-05-05

最新评论