当前位置: 首页 > Web前端 > vue.js

Centos7Nginx区分路径部署多个Vue项目

时间:2023-03-31 16:49:08 vue.js

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点击切换移动设备