Penjelasan terperinci tentang cara menggunakan berbilang projek Vue di bawah nama domain yang sama dalam konfigurasi Nginx

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Nginx+Vue terutamanya tentang cara menggunakan berbilang projek Vue di bawah nama domain yang sama dengan konfigurasi Nginx Rakan yang berminat boleh melihatnya bersama-sama.

Pembelajaran yang disyorkan: "Tutorial penggunaan Nginx" "tutorial video vue"

Kata Pengantar

Memandangkan terdapat banyak halaman pendaratan untuk projek yang berbeza di bahagian hadapan, tetapi kami tidak mahu halaman pendaratan setiap projek menjadi nama domain yang berasingan, jadi kami menyediakan nama domain umum, dan kemudian membezakan projek yang berbeza berdasarkan laluan permintaan.

Malah, ini juga boleh dilakukan dengan projek Vue Dalam kod bahagian hadapan, halaman pendaratan projek yang berbeza diminta mengikut laluan yang berbeza, iaitu, halaman pendaratan semua projek ditulis dalam satu. Projek Vue.

Tetapi di sini saya bercakap tentang kaedah pelaksanaan untuk menggunakan berbilang projek Vue melalui Nginx.

Penyelesaian

Proksi mengakses projek yang berbeza mengikut laluan akar yang berbeza, yang hanya menyelesaikan masalah ini.

Langkah 1

Ubah suai laluan vue.config.js dalam fail publicPath kepada /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"),
      },
    },
  },
};

Langkah 2

Ubah suai router dalam fail index.js dalam folder base kepada ‘/project/’

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

Langkah ketiga

pakej dan jana folder dist, kemudian letakkannya di lokasi yang sepadan, konfigurasikanNginx

 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;
        }}

Selepas melengkapkan perkara di atas, anda boleh mengakses semua

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

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan berbilang projek Vue di bawah nama domain yang sama dalam konfigurasi Nginx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!