快捷導(dǎo)航

nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的實(shí)現(xiàn)

更新時(shí)間：2023年10月25日 10:15:57 作者：coderkey

本地開發(fā)好了多個(gè)前端微信網(wǎng)頁項(xiàng)目,想部署上線,本文就來介紹一下nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下

前言：

本地開發(fā)好了多個(gè)前端微信網(wǎng)頁項(xiàng)目，想部署上線，但是微信那邊必須得在默認(rèn)端口下訪問前端項(xiàng)目，于是就nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目。

問題：

默認(rèn)端口就只有一個(gè)，多個(gè)項(xiàng)目實(shí)現(xiàn)不了。

解決方法：

根據(jù)根路徑不同分別代理訪問不同項(xiàng)目，剛好解決這個(gè)問題。

第一步：

在vue.config.js文件中修改publicPath路徑為/project/

const path = require("path");
// import path from 'path'
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
  publicPath: "/project/",
  // 選項(xiàng)...
  devServer: {
    open: true, // 設(shè)置自動(dòng)打開
    port: 8080, // 設(shè)置端口號(hào)
    // host: '192.168.0.124', // ip 本地
    // hotOnly: true, // 熱更新
    disableHostCheck: true, // 解決 Invalid Host header的原因
    proxy: {
      //設(shè)置代理
      "/connect": {
        target: "https://open.weixin.qq.com",
        changeOrigin: true,
        // ws: true, //如果要代理 websockets，配置這個(gè)參數(shù)
        secure: false, //如果是http接口，需要配置該參數(shù)
        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文件夾，然后放在對(duì)應(yīng)的位置上，配置nginx，這里用的是window服務(wù)器；

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

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        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

到此這篇關(guān)于nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)nginx配置多個(gè)vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: