nginx + vue配置实现同域名下不同路径访问不同项目

前端  /  管理员 发布于 2年前   2106

根据请求路径来区分不同项目，其实也可以是同一个vue项目的，在前端代码中根据不同的路由请求不同项目落地页，也就是在一个 Vue 项目中写所有项目的落地页。

下面是通过Nginx部署多个Vue项目的实现方法。

解决方法：

根据根路径不同分别代理访问不同项目。

进入步骤：

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

2.在router文件夹中 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.zongscan.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;
        }
}

设置完后，可实现以下访问效果

// 例如:
https://www.zongscan.com 
https://www.zongscan.com/project