vue2.0 vue3.0 打包二级项目-如何部署二级目录

看了很多其他大佬的文章，我这边做了一个笔记记录了一下vue打包二级目录的方法

我们想要的效果是什么

我们想www.taobao.com/web二级目录来访问我们的页面
如果我们没有做任何的配置，直接将打包的dist文件放在web下
像这样。
我们页面访问是空白的原因就是因为打包后的文件是从根目录开始找的，也就是会在www.taobao.com下面去找资源文件，而我们的资源在web下
最终我们前端要做的就是打包出来的dist文件里面的index.html访问路径是这样的

vue2.0 vue3.0都有用vue-cli-service打包的,具体基于什么可以看下官方介绍
解决方法一在vue.config.js里面添加
const BASE_URL = process.env.NODE_ENV === 'production' ? '/web' : ''
module.exports = {publicPath: BASE_URL
}
解决方法二在路由配置如下：
const router = new VueRouter({mode: 'history',base:'/web/',  // 这是二级路径                         routes
})

用vite打包
解决方法在package.json
// build后面添加
"scripts": {"dev": "vite","build": "vite build --base=/web/"}
}
这是看到人家的方法做的
如果有什么补充的或者其他更好的方法，麻烦大佬留言。

vue2.0 vue3.0 打包二级项目-如何部署二级目录相关推荐

尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]
视频链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:当前页面. P51-100:尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
vue2.0,vue3.0 v-model数据双向绑定
vue2.0,vue3.0 v-model数据双向绑定 vue.2.0 vue2.0 vue-property-decorator vue3.0 vue.2.0 <base-checkbox v ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
一起来看看这份集齐vue2.0/vue3.0面试通杀秘籍（2021版） PDF，面试官问的源码问题绝对稳了！
Vue3.0 对于我们前端人的重要性 -- 2021年面试必备前言 2020年09月18日,vue3.0正式发布.随着它的发布,Vue.js再次被推上了前端的风口浪尖. 同时,面试官的提问也将加入一 ...
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通学习笔记
已经将课程刷完,但是后来发现网上有很多总结特别好的网站,现在汇总如下 https://www.yuque.com/cessstudy/kak11d 大家好,老师的笔记拿到了,给大家快速拿到阿里云-- ...
vue项目nginx部署二级目录
一.修改router.js中添加base根目录配置 const vueRouter = new Router({mode: 'history',base: 'app', 二.修改vue.config. ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1. 2.4.9.12等等标准宫格拖拽,基于vue-grid-layout 拖拽换位无刷新 vue项目中基于vue-grid-layout开发的拖拽 ...

vue2.0 vue3.0 打包二级项目-如何部署二级目录

我们想要的效果是什么

vue2.0 vue3.0都有用vue-cli-service打包的,具体基于什么可以看下官方介绍
解决方法一在vue.config.js里面添加

解决方法二在路由配置如下：

用vite打包
解决方法在package.json

vue2.0 vue3.0 打包二级项目-如何部署二级目录相关推荐

最新文章

热门文章

vue2.0 vue3.0 打包二级项目-如何部署二级目录

我们想要的效果是什么

vue2.0 vue3.0都有用vue-cli-service打包的,具体基于什么可以看下官方介绍 解决方法一 在vue.config.js里面添加

解决方法二 在路由配置如下：

用vite打包 解决方法 在package.json

vue2.0 vue3.0 打包二级项目-如何部署二级目录相关推荐

最新文章

热门文章

vue2.0 vue3.0都有用vue-cli-service打包的,具体基于什么可以看下官方介绍
解决方法一在vue.config.js里面添加

解决方法二在路由配置如下：

用vite打包
解决方法在package.json