vue打包后资源文件访问不到,vue如何解决打包文件过大

一、背景实现多个Vue子项目合并发布到同一个nginx每个子项目一个目录二、现象项目在开发环境中正常运行打包上传到nginx根目录的下一级，就会出现问题三、解决

这个问题是由于Vue是从nginx的根目录开始查找组件导致的。所以需要修改路由的查找起点。直接上代码了

1、重新指定路由的base url , base: process.env.BASE_URL, 其中 BASE_URL 是自定义的路径. 下面是router目录下的index.js 中的关键代码： route.jsconst router = new VueRouter({ base: process.env.BASE_URL, // 注意这里的配置，BASE_URL会在后面定义 mode: "history", routes})

2、定义 BASE_URL

vue.config.js 关键代码

const path = require('path')//1、-----------注意这里：BASE_URL 的值/bigs 被添加的环境变量 process.env 中const BASE_URL = process.env.NODE_ENV === 'production'?'/bigs':'/'const resolve = dir => { return path.join(__dirname, dir)}module.exports = { //2、-------------------------------------------注意这里设置 publicPath publicPath: BASE_URL, chainWebpack: config => { config.resolve.alias .set('_c', resolve('src/components')) },}

至此，打包后上传到nginx的 /html/bigs 目录即可 ，只能上传到此目录

四、这个问题是我2020年遇到时处理过一次，后来在我开发“网上邻居”这个软件时，又遇到了，竟然所我搜到以以前自己写的文章，而且还没有发现是自己写的，特此记录，希望下次再遇到能快速解决吧！！！