Déployer le projet vue sur nginx (tutoriel détaillé)

vue-router par défaut en mode hachage, utilisant le hachage de l'URL pour simuler une URL complète. Lorsque l'URL change, la page ne sera pas rechargée. Cet article présente principalement le déploiement des projets vue sur nginx (mode historique). Les amis qui en ont besoin peuvent se référer à

vue-router. La valeur par défaut est le mode hachage, utilisant le hachage de l'url pour simuler une url complète. . Lorsque l'url est modifiée, la page ne se rechargera pas. Mais si nous ne voulons pas hacher les chemins se terminant par #, nous pouvons utiliser le mode historique de routage. Par exemple, l'URL suivante :

Si le mode hachage est utilisé, l'accès devient http://localhost:8080/bank/page/count/#/. Si le routage utilise l'historique, le chemin d'accès devient. Cela devient comme suit :

http://localhost:8080/bank/page/count;

La configuration du routage est la suivante : Prenons le projet vue-cli comme exemple :

Le code dans src/router/index.js est le suivant :

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式
 base: '/bank/page', // 基础路径
 routes: [
  {
   path: '/count',
   name: 'count',
   component: resolve => require(['@/views/count'], resolve) // 使用懒加载
  }
 ]
});

Cependant, ce mode d'historique nécessite une prise en charge de la configuration en arrière-plan. Par exemple :

Quand on va sur la page d'accueil du projet, tout est normal et accessible, mais quand on rafraîchit la page ou accède directement au chemin, 404 sera renvoyé car en mode historique. , c'est uniquement dynamique. Utiliser js pour faire fonctionner window.history pour changer le chemin dans la barre d'adresse du navigateur ne lance pas de requête http. Cependant, lorsque je saisis l'adresse directement dans le navigateur, je dois lancer une requête http au serveur. , mais cette cible est sur le serveur. Elle n'existe pas, donc 404 sera renvoyé. Comment le résoudre ? Nous pouvons désormais transmettre toutes les demandes à http://localhost:8080/bank/page/index.html.

1 : La configuration sur le serveur Apache est la suivante :

1. Si nous utilisons Apache comme serveur Web maintenant, nous besoin de l'activer. support htaccess :

Ajoutez ce qui suit au fichier, et tout sera normal

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /bank/page/index.html [L]
</IfModule>

La fonction d'Apache ci-dessus est de transmettre toutes les requêtes qui n'existent pas. sur le serveur à l'index html, afin qu'il soit accessible directement via diverses URL.

Remarque :

1 RewriteRule /bank/page/index.html [L] Ce code doit être ajouté /bank. devant /page/ c'est comme ça, car j'ai

ajouté le chemin /bank/page/ dans la base de configuration de routage, sinon il ne correspondra pas.

2. Dans le projet vue-cli, vous devez modifier le AssetPublicPath sous le build dans config/index.js : '/bank/page/'. Si vous utilisez un chemin relatif, le

.

le fichier fragmentaire signalera une erreur introuvable.

3. Créez un nouveau fichier .htaccess dans le répertoire www/bank/page d'apache Vous devez modifier le RewriteRule en /bank/page/index.html, sinon le serveur signalera directement une erreur 404. lors de l'actualisation de la page.

4. Modifiez le fichier httpd.conf et activez la fonction rewrite_module.

5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so, supprimez le #

6 Ensuite, recherchez la ligne AllowOverride None et remplacez-la par AllowOverride All pour que le fichier .htaccess prenne effet. .

2 : La configuration sur le serveur nginx est la suivante :

vue-cli exécute la commande packaging :

npm run build

Comme ci-dessus, emballez-le, générez un dossier dist, copiez les fichiers du dossier directement dans le répertoire du serveur nginx, puis vous pouvez ouvrir le projet, mais seule la page d'accueil est visible. L'actualisation de la page entraîne également 404. . La raison est la même que ci-dessus, vous devez donc configurer le serveur nginx pour sauter tous les chemins ou dossiers et rediriger vers la page d'accueil index.html : de cette façon, vous pouvez trouver l'itinéraire.

La configuration du serveur nginx est la suivante :

1.

2. Entrez dans le répertoire /etc/usr/local/nginx/conf/;

Exécutez la commande :

2-1 cd /etc/ et appuyez sur Entrée

2-2 cd /usr/ Enter

2-3 cd loacl/ Enter

2-4 cd nginx Enter

2-5 cd conf Appuyez Entrez

2-6 vi nginx_v4.conf. Entrez le fichier nginx et créez un nouveau projet. La configuration pertinente est la suivante :

Par exemple, notre adresse de nom de domaine actuelle est accessible comme ceci. : http://aa.xx .com/bank/page/count , la configuration suivante est requise :

server {
  listen 443;   # 监听本机所有ip上的 443 端口
  listen 80;   # 监听本机所有ip上的 80 端口
  server_name aa.xx.com; # 域名地址
  access_log /data/www/logs/nginx/aa/access.log main; # 新建日志文件
  include nginx_xx.conf; 
  /* 下面是多个location 用于配置路由地址 */
  location / {
   proxy_pass http://aa/;
   include nginx_proxy.conf;
  }
  location /bank/page/ {
   try_files $uri $uri/ /bank;
  },
  /* http://aa.xx.com/bank2/page/count 有多个不同的地址 就加一个如下这个配置 */
  location /bank2/page/ {
   try_files $uri $uri/ /bank2;
  }
  error_page 500 502 503 504 /502.html;
  location = /50x.html {
   root  html;
  }
 }

commande try_files :

Syntaxe : try_files file ... uri ou try_files file .. . = code

Valeur par défaut : Aucun

Portée : emplacement du serveur

Sa fonction est de vérifier si les fichiers existent dans l'ordre et renvoie le premier fichier ou dossier trouvé (une barre oblique finale indique un dossier). Si tous les fichiers ou dossiers ne peuvent pas être trouvés, une redirection interne sera effectuée vers le dernier paramètre.

Il est à noter que seul le dernier paramètre peut provoquer une redirection interne, les paramètres précédents ne règlent que le pointage de l'URI interne. Le dernier paramètre est l'URI de secours et doit exister, sinon une erreur interne 500 se produira. Les emplacements nommés peuvent également être utilisés dans le dernier paramètre. Contrairement à la directive de réécriture, si l'URI de secours n'est pas un emplacement nommé, alors les

arguments ne sont pas automatiquement conservés. Si vous souhaitez conserver les arguments, vous devez le déclarer explicitement.

directive d'emplacement

Syntaxe : emplacement [=|~|~*|^~|@] /uri/ { … }

Valeur par défaut :Aucun

Portée : serveur

location指令是用来为匹配的URI进行配置，URI即语法中的"/uri/"，可以是字符串或正则表达式。但如果要使用正则表达式，则必须指定前缀。 [@] 即是命名location，一般只用于内部重定向请求。

3. 设置成功后需要重启：nginx重启命令；在 /etc/usr/local/nginx/conf/ 目录下, cd ../ 然后进入sbin目录下 cd sbin 接着运行命令 ./nginx -s reload 重启后即可生效。

4. 在/data/www/logs/nginx/aa/目录下 新建 access.log 文件。

然后nginx保存和退出命令 :wq

直接退出的命令是 :q

5. mac系统下 自带 apache2服务器，需要对apache2作反向代理；配置如下：

进入本地mac apache2配置；

命令：cd /etc/apache2

命令：sudo vi httpd.conf

<VirtualHost *:80>
 ServerName aa.xx.com
 ProxyRequests off
 Header set Access-Control-Allow-Origin *
 <Proxy *>
   Order deny,allow
   Allow from all
 </Proxy>
 <Location /aa>
   ProxyPass http://localhost:8896/
   ProxyPassReverse http://localhost:8896/
 </Location>
 // .... 更多配置省略
</VirtualHost>

然后进入 sbin目录下 启动服务 sudo apachectl start

重启命令如下 sudo apachectl restart

6. java服务端的配置如下 （如果是vm放到开发那边的话，开发那边需要如下处理下，如果页面vm不放在开发那边的话，下面的配置可以忽略）

在项目目录下 webapp/web-inf/view/ 新建文件夹 aa 和 include文件

aa文件下 新建index.vm

如下代码：

#parse("include/common.vm")
#@frame("xx管理",true)
#css(["${version}/business/aa/aa.css"]) // 打包后的css路径，具体看自己的路径
<p id="app"></p>
#js(["${version}/business/aa/aa.js"]) // 打包后的js路径，具体看自己的路径
#end

6-2 java开发需要配置一下：

1 设置路由： /aa 设置路由到 /aa/index.vm

2 这个include/common.vm有一个地址配置，是在disconf上配置的，你加一个

地址配置到 //aa.xx.com/aa/dist 上即可

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用vue2.0.js实现多级联动选择器

使用mint-ui实现省市区三级联动效果

使用vue实现二级路由设置方法

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!