Stellen Sie das Vue-Projekt auf Nginx bereit (ausführliches Tutorial)

vue-router ist standardmäßig im Hash-Modus und verwendet den Hash der URL, um eine vollständige URL zu simulieren. Wenn sich die URL ändert, wird die Seite nicht neu geladen. In diesem Artikel wird hauptsächlich die Bereitstellung von Vue-Projekten auf Nginx vorgestellt (Verlaufsmodus). Freunde, die es benötigen, können sich auf den Hash-Modus beziehen, bei dem der Hash der URL verwendet wird, um eine vollständige URL zu simulieren . Wenn sich die URL ändert, wird die Seite nicht neu geladen. Wenn wir jedoch keine Pfade, die mit # enden, hashen möchten, können wir den Routing-Verlaufsmodus verwenden. Zum Beispiel die folgende URL:

Wenn der Hash-Modus verwendet wird, wird der Zugriff zu http://localhost:8080/bank/page/count/#/. Wenn das Routing den Verlauf verwendet, wird der Zugriffspfad Es wird wie folgt:

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

Die Routing-Konfiguration ist wie folgt: Nehmen wir das vue-cli-Projekt als Beispiel:

Der Code in src/router/index.js lautet wie folgt:

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) // 使用懒加载
  }
 ]
});

Dieser Verlaufsmodus erfordert jedoch Hintergrundkonfigurationsunterstützung . Zum Beispiel:

Wenn wir zur Homepage des Projekts gehen, ist alles normal und kann aufgerufen werden, aber wenn wir die Seite aktualisieren oder direkt auf den Pfad zugreifen, wird 404 zurückgegeben. Das liegt daran, dass es im Verlaufsmodus ist Die Verwendung von js zum Betreiben von window.history zum Ändern des Pfads in der Adressleiste des Browsers initiiert jedoch keine http-Anfrage. Wenn ich die Adresse jedoch direkt in den Browser eingebe, muss ich eine http-Anfrage an den Server initiieren , aber dieses Ziel ist nicht auf dem Server vorhanden, daher wird 404 zurückgegeben. Wir können jetzt alle Anfragen an http://localhost:8080/bank/page/index.html weiterleiten.

1: Die Konfiguration auf dem Apache-Server ist wie folgt: 1. Wenn wir jetzt Apache als Webserver verwenden, verwenden wir Sie müssen es aktivieren. htaccess-Unterstützung:

Fügen Sie Folgendes zur Datei hinzu und alles wird normal sein

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

Die Funktion des oben genannten Apache besteht darin, alle Anfragen weiterzuleiten, die nicht auf dem Server vorhanden sind zu index.html , sodass über verschiedene URLs direkt darauf zugegriffen werden kann.

Hinweis: 1. RewriteRule /bank/page/index.html [L] Sie müssen /bank hinzufügen vorne /page/ ist so, weil ich

den Pfad /bank/page/ in der Routing-Konfigurationsbasis hinzugefügt habe, sonst stimmt er nicht überein.

2. Im vue-cli-Projekt müssen Sie den assetPublicPath unter dem Build in config/index.js ändern: „/bank/page/“.

Chunk-Datei meldet einen Fehler. Nicht gefunden.

3. Erstellen Sie eine neue .htaccess-Datei im Verzeichnis www/bank/page von Apache. Sie müssen die RewriteRule in /bank/page/index.html ändern, sonst meldet der Server direkt einen 404-Fehler beim Aktualisieren der Seite.

4. Ändern Sie die Datei httpd.conf und aktivieren Sie die Funktion rewrite_module.

5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so, entfernen Sie das #

6. Suchen Sie dann die Zeile „AllowOverride None“ und ändern Sie sie in „AllowOverride All“, damit die .htaccess-Datei wirksam wird .

2: Die Konfiguration auf dem Nginx-Server ist wie folgt:

vue-cli Führen Sie den Verpackungsbefehl aus:

npm run build

Paket wie oben, generieren Sie einen dist-Ordner, kopieren Sie die Dateien in diesem Ordner direkt in das Nginx-Serververzeichnis, und dann können Sie das Projekt öffnen, aber beim Aktualisieren der Seite wird auch 404 zurückgegeben. Der Grund ist Das gleiche wie oben, Sie müssen es also in Nginx öffnen. Die Serverkonfiguration überspringt alle Pfade oder Ordner und leitet zur Homepage index.html weiter: Auf diese Weise können Sie die Route finden.

Die Konfiguration des Nginx-Servers lautet wie folgt:

1. Melden Sie sich zuerst am Server an.

2. Geben Sie das Verzeichnis /etc/usr/local/nginx/conf/ ein.

Führen Sie den Befehl aus:

2-1 cd /etc/ und drücken Sie die Eingabetaste

2-2 cd /usr/ Geben Sie

2-3 cd loacl/ ein. Geben Sie

2-4 cd nginx ein. Geben Sie

2-5 cd conf ein. Drücken Sie Geben Sie

2-6 vi nginx_v4.conf ein. Geben Sie die Nginx-Datei ein und erstellen Sie ein neues Projekt. Die entsprechende Konfiguration lautet wie folgt:

Zum Beispiel wird auf unsere aktuelle Domainnamenadresse zugegriffen : http://aa.xx .com/bank/page/count, die folgende Konfiguration ist erforderlich:

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

try_files Befehl:

Syntax: try_files Datei . .. uri oder try_files Datei ... = Code

Standardwert: Keine

Geltungsbereich: Serverstandort

Seine Funktion besteht darin, zu überprüfen, ob die Dateien in der richtigen Reihenfolge vorhanden sind, und sie zurückzugeben die erste gefundene Datei oder den ersten gefundenen Ordner (Ende Fügen Sie einen Schrägstrich hinzu, um einen Ordner anzuzeigen). Wenn nicht alle Dateien oder Ordner gefunden werden, wird eine interne Umleitung zum letzten Parameter durchgeführt.

Es ist zu beachten, dass nur der letzte Parameter eine interne Umleitung bewirken kann, die vorherigen Parameter legen nur die Ausrichtung des internen URI fest. Der letzte Parameter ist der Fallback-URI und muss vorhanden sein, sonst tritt ein interner 500-Fehler auf. Im letzten Parameter können auch benannte Orte verwendet werden. Im Gegensatz zur Rewrite-Anweisung werden die Argumente

nicht automatisch beibehalten, wenn der Fallback-URI kein benannter Speicherort ist. Wenn Sie die Argumente beibehalten möchten, müssen Sie sie explizit deklarieren.

Standortanweisung

Syntax: Standort [=|~|~*|^~|@] /uri/ { … }

Standardwert :Keine

Geltungsbereich: Server

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实现二级路由设置方法

Das obige ist der detaillierte Inhalt vonStellen Sie das Vue-Projekt auf Nginx bereit (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!