Nginx区分路径部署多个Vue项目nginx多静态文件部署。我的个人博客项目占用nginx根路径，而且我只有一个域名，也不打算用二级域名，所以直接用路径区分一下。一个域名只部署一个静态文件服务很简单，把打包后的文件放上去就可以了。多个vue项目主要是路径问题，静态js文件和自定义路由。本来没打算看这篇文章的，但是感觉很多人都在问这个关于nginx部署vue的项目。个人项目部署地址项目Github地址：https://github.com/CoderCharm...项目在线部署地址：https://www.charmcode.cn/app/...环境vue2.6.11vue-router3.3。1vue-cli4.4.0由于我用的是vue-cli4，默认情况下项目根路径下没有vue.config.js文件。在官网上看到了这个关于vue.config.js的描述。参考官网??说明https://cli.vuejs.org/zh/config/：@vue/cli的一些全局配置，比如你常用的packagemanager，你本地保存的presets，都保存在一个名为.vuerc的文件中在主目录JSON文件中。您可以直接使用编辑器编辑此文件以更改保存的选项。也可以使用vueconfig命令查看或修改全局CLI配置添加配置vue.config.js文件静态资源路由js、css等路径，但vueconfig是全局配置。我直接修改这个项目不合适，所以我只是在项目根路径下手动添加了vue.config.js//https://cli.vuejs.org/zh/guide/deployment.html#github-pagesmodule.exports={publicPath:process.env.NODE_ENV==='生产'?'/app/mall/'///app/mall/对应后面的`nginx`路径，这里加的目的是统一其他静态资源文件的前缀路径：'/',};修改src/router/index.js，项目页面跳转路由constrouter=newVueRouter({base:'/app/mall',//主要添加这个/app/mall注意这里和上面的一致，就是nginx定位路径，即Requestpathroutes,mode:'history'});修改src/config/index.js项目生产请求地址（非必须）。没有必要。每个人对这个地方的封装都不一样。默认情况下，将请求部署的环境地址。exportletappConfig={development:'http://127.0.0.1:8010',//本地开发（ps:vue-cli会自动帮我们区分生产和开发，npmrunserve是开发，生产：'https://www.your_domain.com',//生产地址npmrunbuilddefaultstoproduction};然后我在src/utils/url.js文件中区分前缀，最后在src/utils/request.js中使用文件.修改完之后，可以运行npmrunserve，看区分后能不能正常访问，有没有纠错。如果没有纠错，可以直接运行npmrunbuild生成静态文件，上传静态文件。我通过FillZilla上传静态资源文件。我将它们上传到服务器/data/mall/文件夹。记住这个文件路径，后面nginx会指向这里。nginx文件配置Centos7nginx默认配置地址为/etc/nginx/nginx.conf或部分版本默认导入/etc/nginx/conf.d/default.conf文件配置server{listen80;服务器名称本地主机；#charsetkoi8-r;#access_log/var/log/nginx/host.access.logmain;#...位置/{root/usr/share/nginx/html;indexindex.htmlindex.htm;}#添加文件#/app/商城项目访问路径和上述地址对应位置/app/mall/{alias/data/mall/;#项目存放路径try_files$uri$uri//app/mall/index.html;#内部项目跳转路径}}检测配置是否有语法错误nginx-treload配置nginx-sreloadPC端，谷歌浏览器需要F12点击切换移动设备
