Nginx 구성에서 동일한 도메인 이름으로 여러 Vue 프로젝트를 배포하는 방법에 대한 자세한 설명

이 글은 Nginx+Vue에 대한 관련 지식을 제공합니다. 주로 Nginx 구성을 사용하여 동일한 도메인 이름으로 여러 Vue 프로젝트를 배포하는 방법에 대해 설명합니다. 모두 도움이 되었습니다.

추천 학습: "Nginx 사용법 튜토리얼" "vue 비디오 튜토리얼"

Foreword

프런트 엔드에는 다양한 프로젝트에 대한 많은 랜딩 페이지가 있지만 우리는 각 프로젝트가 동일한 랜딩 페이지를 가지고 별도의 도메인 이름을 가지고 있으므로 일반 도메인 이름을 설정한 후 요청 경로에 따라 다른 프로젝트를 구분합니다.

실제로 이는 Vue 프로젝트에서도 가능합니다. 프런트엔드 코드에서는 다양한 경로에 따라 다양한 프로젝트 랜딩 페이지가 요청됩니다. 즉, 모든 프로젝트의 랜딩 페이지가 하나의 Vue 프로젝트에 작성됩니다.

하지만 여기서는 Nginx를 통해 여러 Vue 프로젝트를 배포하는 구현 방법에 대해 이야기하고 있습니다.

Solution

다양한 루트 경로에 따라 다양한 프로젝트에 대한 프록시 액세스를 제공하여 이 문제를 해결합니다.

1단계

vue.config.js 파일의 publicPath 경로를 /project/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;
        }}

2단계 🎜🎜 수정 router 폴더에 있는 index.js 파일의 base를 '/project/'🎜

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

🎜🎜🎜세 번째 단계 🎜 🎜패키지 dist 폴더를 생성한 후 해당 위치에 배치하고 Nginx를 구성하세요🎜rrreee🎜위 작업을 완료하면 모든 항목에 액세스할 수 있습니다🎜rrreee

위 내용은 Nginx 구성에서 동일한 도메인 이름으로 여러 Vue 프로젝트를 배포하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!