Ausführliche Erläuterung, wie Sie mehrere Vue-Projekte unter demselben Domänennamen in der Nginx-Konfiguration bereitstellen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Nginx+Vue. Es geht hauptsächlich darum, wie Sie mehrere Vue-Projekte unter demselben Domainnamen mit der Nginx-Konfiguration bereitstellen. Ich hoffe, dass es hilfreich ist Jeder. Hilfreich.

Empfohlenes Lernen: „Nginx-Nutzungs-Tutorial“ „vue-Video-Tutorial“

Vorwort

Da das Frontend viele Zielseiten für verschiedene Projekte hat, wir aber nicht möchten, dass jedes Projekt dies tut Wir haben einen separaten Domänennamen für eine Zielseite. Daher richten wir einen allgemeinen Domänennamen ein und unterscheiden dann verschiedene Projekte anhand des Anforderungspfads.

Tatsächlich ist dies auch mit einem Vue-Projekt möglich. Im Front-End-Code werden unterschiedliche Projekt-Landingpages nach unterschiedlichen Routen angefordert, dh die Landingpages aller Projekte werden in einem Vue-Projekt geschrieben.

Aber hier spreche ich über die Implementierungsmethode der Bereitstellung mehrerer Vue-Projekte über Nginx.

Lösung

Proxy-Zugriff auf verschiedene Projekte entsprechend unterschiedlicher Root-Pfade, was dieses Problem einfach löst.

Schritt 1

Ändern Sie den publicPath-Pfad in der Datei vue.config.js in /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;
        }}

Schritt 2 🎜🎜Ändern base in der Datei index.js im Ordner router nach '/project/'🎜

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

🎜🎜🎜Dritter Schritt 🎜 🎜Paket und generieren Sie den Ordner dist, platzieren Sie ihn dann am entsprechenden Speicherort, konfigurieren Sie Nginx🎜rrreee🎜Nach Abschluss der oben genannten Schritte können Sie auf alles zugreifen🎜rrreee

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie Sie mehrere Vue-Projekte unter demselben Domänennamen in der Nginx-Konfiguration bereitstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!