首頁 > web前端 > js教程 > 主體

在nginx上部署vue專案(詳細教學)

亚连
發布: 2018-06-14 17:42:53
原創
7092 人瀏覽過

vue-router 預設是hash模式,使用url的hash來模擬一個完整的url,當url改變的時候,頁面不會重新載入。這篇文章主要介紹了在nginx上部署vue專案(history模式),需要的朋友可以參考下

vue-router 預設是hash模式,使用url的hash來模擬一個完整的url,當url改變的時候,頁面不會重新載入。但是如果我們不想hash這種以#號結尾的路徑時候的話,我們可以使用路由的history的模式。例如以下網址:

使用hash模式的話,那麼訪問變成http://localhost:8080/bank/page/count/#/ 這樣的訪問,如果路由使用history的話,那麼訪問的路徑變成如下:

http://localhost:8080/bank/page/count 這樣的了;

在路由的設定就是如下:我們還是以vue-cli專案為例:

在src/router/index.js 程式碼如下:

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) // 使用懒加载
  }
 ]
});
登入後複製

不過history的這個模式需要後台設定支援。例如:

當我們進行專案的主頁的時候,一切正常,可以訪問,但是當我們刷新頁面或直接訪問路徑的時候就會返回404,那是因為在history模式下,只是動態的透過js操作window.history來改變瀏覽器位址列裡的路徑,並沒有發起http請求,但是當我直接在瀏覽器裡輸入這個位址的時候,就一定要對伺服器發起http請求,但是這個目標在伺服器上又不存在,所以會回傳404,怎麼解決呢?我們現在可以把所有要求轉寄到 http://localhost:8080/bank/page/index.html上就可以了。

一:apache伺服器上的設定如下:

#1. 如果我們現在是使用apache做web伺服器的話,我們需要開啟. htaccess支援即可:

在檔案裡加如下,就一切正常了

<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>
登入後複製

上面的apache的作用是:把所有伺服器上不存在的請求全部轉送到index.html上去,這樣就可以直接透過各種url來存取了。

注意:

1. RewriteRule . /bank/page/index.html [L] 這段程式碼;前面需要加/bank /page/這樣的,因為我在路由配置base裡面

加了/bank/page/ 這個路徑,否則匹配不到了。

2. vue-cli 專案中需要修改config/index.js 中的build下的assetsPublicPath: '/bank/page/', 如果使用相對路徑,

chunk檔案會報錯找不到。

3. 在apache的 www/bank/page 目錄下新建 .htaccess文件,需要修改RewriteRule 為/bank/page/index.html, 否則刷新頁面服務端會直接報404錯誤。

4. 修改httpd.conf文件,開啟rewrite_module功能。

5. LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的

#6. 然後找到AllowOverride None的那行,把它改成AllowOverride All,來使.htaccess檔生效。

二:nginx伺服器上的設定如下:

vue-cli 執行打包指令:

npm run build
登入後複製

如上進行打包,產生dist資料夾,把該資料夾下的檔案直接複製到nginx伺服器目錄下,就可開啟項目,但是只有首頁可以看到的,刷新一下頁面也是404了,原因和上面一樣,因此需要在nginx伺服器設定對所有的路徑或資料夾進行跳轉,重定向到首頁index.html即可:這樣就能找到路由了。

nginx伺服器設定如下:

#1. 首先登入伺服器。

2. 進入目錄/etc/usr/local/nginx/conf/下;

執行指令:

2-1 cd /etc/ 回車

2-2 cd /usr/ 回車

2-3 cd loacl/ 回車

2-4 cd nginx 回車

#2-5 cd conf回車

2-6 vi nginx_v4.conf 進入nginx檔案內新建一個專案的相關設定如下:

例如我們現在的網域位址這樣存取的:http://aa.xx .com/bank/page/count , 需要以下設定:

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 指令:

語法:try_files file ... uri 或try_files file ... = code

預設值:無

作用域:server location

其作用是依序檢查檔案是否存在,傳回第一個找到的檔案或資料夾(結尾加斜線表示為資料夾),如果所有的檔案或資料夾都找不到,會進行一個內部重定向到最後一個參數。

要注意的是,只有最後一個參數可以引起一個內部重定向,而先前的參數只設定內部URI的指向。最後一個參數是回退URI且必須存在,否則會出現內部500錯誤。命名的location也可以使用在最後一個參數。與rewrite指令不同,如果回退URI不是命名的location那麼

args不會自動保留,如果你想保留args,則必須明確宣告。

location指令

語法:location [=|~|~*|^~|@] /uri/ { … }

預設值:無

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

以上是在nginx上部署vue專案(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!