Detailed explanation of how to deploy multiple Vue projects under the same domain name in Nginx configuration

This article brings you relevant knowledge about Nginx Vue. It mainly talks about how to deploy multiple Vue projects under the same domain name under Nginx configuration. Interested friends can take a look at it together. I hope it will be helpful to you. Everyone is helpful.

Recommended learning: "Nginx usage tutorial" "vue video tutorial"

Preface

Since the front end has landing pages for many different projects, but we don’t want the landing pages of each project to be a separate domain name, so we set up a general domain name, and then distinguish different projects based on the request path.

In fact, this can also be a Vue project. In the front-end code, different project landing pages are requested according to different routes, that is, the landing pages of all projects are written in one Vue project.

But here I am talking about the implementation method of deploying multiple Vue projects through Nginx.

Solution

The proxy accesses different projects based on different root paths, which just solves this problem.

The first step

Modify the publicPath path in the vue.config.js file to /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"),
      },
    },
  },
};

Second step

index.js file in the router folder Modify base to '/project/'

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

The third step

Package and generatedist folder, and then place it in the corresponding location, configure 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;
        }}

After completing the above, you can access all

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

The above is the detailed content of Detailed explanation of how to deploy multiple Vue projects under the same domain name in Nginx configuration. For more information, please follow other related articles on the PHP Chinese website!