Nginx辨别门路部署多个Vue我的项目

nginx 多动态文件部署。
我集体博客我的项目占用了nginx根门路，而我只有一个域名，也不筹备用二级域名了， 所以就间接用门路辨别开。
一个域名，只部署一个动态文件服务，那很简略，只用把打包后文件放上去就行。
多个Vue我的项目次要就是门路问题，动态js文件以及自定义的路由。

原本不打算把这篇文章般到思否的，然而感觉好多人问这个对于nginx部署vue的我的项目。

集体我的项目部署地址

我的项目Github地址: https://github.com/CoderCharm...

我的项目线上部署地址: https://www.charmcode.cn/app/...

环境

  • vue 2.6.11
  • vue-router 3.3.1
  • vue-cli 4.4.0

因为我用的vue-cli 4,所以我的项目根门路下默认没有 vue.config.js文件, 我在官网看到对于这个vue.config.js是这样形容的.

  • 参考官网阐明https://cli.vuejs.org/zh/config/:
有些针对 @vue/cli 的全局配置，例如你习用的包管理器和你本地保留的 preset，都保留在 home 目录下一个名叫 .vuerc 的 JSON 文件。你能够用编辑器间接编辑这个文件来更改已保留的选项。
你也能够应用 vue config 命令来审查或批改全局的 CLI 配置

增加配置vue.config.js 文件 动态资源路由js,css等门路

然而 vue config 是全局的配置，我这个我的项目间接批改这里不适合，于是我就在我的项目 根门路 下本人手动增加了vue.config.js

// 参考 https://cli.vuejs.org/zh/guide/deployment.html#github-pagesmodule.exports = {    publicPath: process.env.NODE_ENV === 'production'        ? '/app/mall/'   // /app/mall/ 对应前面`nginx`门路，这里增加的目标是其余动态资源文件对立前缀门路        : '/',};

批改src/router/index.js, 我的项目页面跳转路由

const router = new VueRouter({    base: '/app/mall',   // 次要增加这个 /app/mall 留神这个 和下面的统一，为nginx location门路， 也就是申请门路    routes,    mode: 'history'});

批改 src/config/index.js 我的项目生产申请地址(非必要)

非必要，这个中央每个人封装的都不一样，默认会申请 部署的环境地址。
export let appConfig = {    development: 'http://127.0.0.1:8010',      // 本地开发 (ps:vue-cli会主动帮咱们辨别生产开发，npm run serve就是开发，    production: 'https://www.your_domain.com',  // 生产地址 npm run build 默认为生产};
而后 我是在src/utils/url.js 文件外面 辨别前缀的， 最初在 src/utils/request.js 文件外面应用。

批改好之后，能够npm run serve看看，辨别好之后是否失常拜访，是否有改错。
没有改错能够间接npm run build 生成动态文件

上传动态文件

我是通过FillZilla上传动态资源文件

我是上传到服务器 /data/mall/ 文件夹下， 记住这个文件门路, 前面nginx会指向这里。

nginx 文件配置

Centos7 nginx默认配置地址为 /etc/nginx/nginx.conf
或者有的版本默认引入 /etc/nginx/conf.d/default.conf文件 配置
server {    listen       80;    server_name  localhost;    #charset koi8-r;    #access_log  /var/log/nginx/host.access.log  main;            # ...    location / {            root   /usr/share/nginx/html;            index  index.html index.htm;    }            # 增加文件    # /app/mall 我的项目拜访门路和下面地址对应     location /app/mall/ {        alias /data/mall/;   # 我的项目寄存门路        try_files $uri $uri/ /app/mall/index.html;  # 外部我的项目跳转门路    }}

检测配置是否有语法错误

nginx -t

从新加载配置

nginx -s reload
PC端, Google浏览器须要F12 点击切换挪动设施