Nginx 構成で複数の Vue プロジェクトを同じドメイン名でデプロイする方法の詳細な説明

この記事では、Nginx Vue に関する関連知識をお届けします。主に、Nginx 構成で同じドメイン名に複数の Vue プロジェクトをデプロイする方法について説明します。興味のある友人は一緒に見てみることができます。お役に立てれば幸いです。 . 皆さん助かります。

推奨学習: 「Nginx 使用法チュートリアル 」 「vue ビデオ チュートリアル 」

序文

フロントエンドにはさまざまなプロジェクトのランディング ページがありますが、各プロジェクトのランディング ページを個別のドメイン名にしたくないため、一般的なドメイン名を設定して、異なるドメイン名を区別します。リクエストパスに基づいてプロジェクトを作成します。

実際、これは Vue プロジェクトでも構いません。フロントエンド コードでは、異なるルートに従って異なるプロジェクトのランディング ページがリクエストされます。つまり、すべてのプロジェクトのランディング ページが 1 つの Vue プロジェクトに記述されます。 。

しかし、ここではNginxを介して複数のVueプロジェクトをデプロイする実装方法について話します。

解決策

プロキシは、異なるルート パスに基づいて異なるプロジェクトにアクセスするため、この問題は解決されます。

最初のステップ

vue.config.js ファイル内の publicPath パスを / に変更します。 router

フォルダー内のプロジェクト /

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"),
      },
    },
  },
};

2 番目のステップindex.js ファイルを変更しますbase から '/project/'

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

3 番目のステップ

パッケージ化して生成 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 中国語 Web サイトの他の関連記事を参照してください。