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/"
  }
}

这是看到人家的方法做的
如果有什么补充的或者其他更好的方法,麻烦大佬留言。


版权声明:本文为Leslie_hxd原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。