Maison > Opération et maintenance > Nginx > Explication détaillée de la façon de déployer plusieurs projets Vue sous le même nom de domaine dans la configuration Nginx

Explication détaillée de la façon de déployer plusieurs projets Vue sous le même nom de domaine dans la configuration Nginx

藏色散人
Libérer: 2023-04-04 15:54:01
avant
3673 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur Nginx+Vue. Il explique principalement comment déployer plusieurs projets Vue sous le même nom de domaine avec la configuration Nginx. Les amis intéressés peuvent y jeter un œil ensemble. tout le monde.

Apprentissage recommandé : "Tutoriel d'utilisation de Nginx" "tutoriel vidéo Vue"

Avant-propos

Étant donné que le front-end comporte de nombreuses pages de destination pour différents projets, nous ne voulons pas que chaque projet avoir une page de destination Un nom de domaine distinct, nous définissons donc un nom de domaine général, puis distinguons différents projets en fonction du chemin de la demande.

En fait, cela peut également être fait avec un projet Vue. Dans le code front-end, différentes pages de destination du projet sont demandées selon différents itinéraires, c'est-à-dire que les pages de destination de tous les projets sont écrites dans un seul projet Vue.

Mais ici, je parle de la méthode d'implémentation de déploiement de plusieurs projets Vue via Nginx.

Solution

Accès proxy à différents projets selon différents chemins racine, ce qui résout simplement ce problème.

Étape 1

Modifiez le chemin publicPath dans le fichier vue.config.js en /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"),
      },
    },
  },
};
Copier après la connexion

Explication détaillée de la façon de déployer plusieurs projets Vue sous le même nom de domaine dans la configuration Nginx

第二步

router文件夹中index.js文件中修改base‘/project/’

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

Explication détaillée de la façon de déployer plusieurs projets Vue sous le même nom de domaine dans la configuration Nginx

第三步

打包生成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;
        }}
Copier après la connexion

Explication détaillée de la façon de déployer plusieurs projets Vue sous le même nom de domaine dans la configuration Nginx

Étape 2 🎜🎜 Modifier base dans le fichier index.js dans le dossier router vers '/project/'🎜
// 例如:http://www.coderkey.com 
http://www.coderkey.com/project
Copier après la connexion
🎜🎜🎜Troisième étape 🎜 🎜Forfait et générez le dossier dist, puis placez-le à l'emplacement correspondant, configurez Nginx🎜rrreee🎜Après avoir terminé ce qui précède, vous pouvez accéder à tout🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers numéros
Erreur lors du redémarrage de nginx
Depuis 1970-01-01 08:00:00
0
0
0
Problème Nginx par défaut.conf
Depuis 1970-01-01 08:00:00
0
0
0
équilibrage de charge nginx
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal