詳解Nginx配置同網域下怎麼部署多個Vue項目

這篇文章為大家帶來了關於Nginx Vue的相關知識，其中主要跟大家聊一聊Nginx配置同域名下怎麼部署多個Vue項目，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

推薦學習：《Nginx使用教學》《vue影片教學》

前言

由於前端有很多不同項目的落地頁，但不希望每個項目的落地頁都是一個單獨的域名，所以就起了個通用的域名，然後根據請求路徑來區分不同項目。

其實這種也可以一個 Vue 項目，在前端程式碼中根據不同的路由請求不同項目落地頁，也就是在一個 Vue 專案中寫所有項目的落地頁。

但這裡我是說透過 Nginx 部署多個 Vue 專案的實作方法。

解決方法

根據根路徑不同分別代理存取不同項目，剛好解決這個問題。

第一步

在vue.config.js檔案中修改publicPath路徑為/project /

const path = require("path");
// import path from 'path'
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  publicPath: "/project/",
  // 选项...
  devServer: {
    open: true, // 设置自动打开
    port: 8080, // 设置端口号
    // host: '192.168.0.124', // ip 本地
    // hotOnly: true, // 热更新
    disableHostCheck: true, // 解决 Invalid Host header的原因
    proxy: {
      //设置代理
      "/connect": {
        target: "https://open.weixin.qq.com",
        changeOrigin: true,
        // ws: true, //如果要代理 websockets，配置这个参数
        secure: false, //如果是http接口，需要配置该参数
        pathRewrite: {
          "^/": "",
        },
      }
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        //这里配置了components文件的路径别名
        "@": resolve("src"),
        // components: resolve("src/components"),
      },
    },
  },
};

第二步驟

在router資料夾中index.js文件中修改base為'/project/'

const router = new VueRouter({
  mode: "history",
  // mode: "hash",
  // base: process.env.BASE_URL,
  base: "/project/",
  routes,});

第三個步驟

打包產生dist資料夾，然後放在對應的位置上，設定Nginx

 server {
        listen       80;
        server_name  www.coderkey.com;

        location / {
            root  F:/parant/dist;
            try_files $uri $uri/ /index.html;
        }

        location /project {
            alias  F:/subparant/dist;
            try_files $uri $uri/ /project/index.html;
            index  index.html;
        }}

以上搞完就可以全部存取了

// 例如:http://www.coderkey.com 
http://www.coderkey.com/project

以上是詳解Nginx配置同網域下怎麼部署多個Vue項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！