乐趣区

关于nginx:Centos7-Nginx区分路径部署多个Vue项目

jiezi

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-pages
module.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 点击切换挪动设施

退出移动版