Nginx線上部署多個Vue項目(路徑區分)

Nginx線上部署多個Vue項目(路徑區分)

nginx 多靜態文件部署。
我個人博客項目占用了nginx根路徑，而我只有一個域名，也不准備用二級域名了， 所以就直接用路徑區分開。
一個域名，只部署一個靜態文件服務，那很簡單，只用把打包后文件放上去就行。
多個Vue項目主要就是路徑問題，靜態js文件以及自定義的路由。

原文請訪問 我個人博客地址

博客地址: https://www.charmcode.cn/article/2020-06-30_nginx_vue

環境

• 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

個人項目部署地址

線上地址: https://www.charmcode.cn/app/mall/home
項目Github地址: https://github.com/CoderCharm/Mall/blob/master/DEPLOYMENT.md