Vue項目上線後刷新報錯404問題（apache，nginx，tomcat）

1、 Vue項目打包發佈apache報錯：

route，配置一個覆蓋全部的路由狀況

一、須要修改router/index.js中new Router 配置，加一個base: '/htcm_front/', 它指定應用的基路徑，該應用是服務於localhost/htcm_front路徑下，因此必須加base配置，不然應用會展現404頁面

二、須要修改config/index.js中build下的assetsPublicPath: '/htcm_front/'，若是用相對路徑，chunk文件會報錯找不到。

三、將項目打包發佈到apache的/var/www/html/下的htcm_front目錄（htcm_front是打包生成的目錄）

後端配置例子（apache配置文件）:

四、修改httpd.conf文件，開啓rewrite_module功能。

        LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#

5、找到AllowOverride None的那行，把它改爲AllowOverride All，來使.htaccess文件生效。

6、在你的項目目錄下，也就是個人front目錄添加一個.htaccess文件。

  Vim   .htaccess

 #.htaccess內容#

<IfModule mod_rewrite.c>

RewriteEngine On

   RewriteBase /

   RewriteRule ^index\.html$ - [L]

   RewriteCond %{REQUEST_FILENAME} !-f

   RewriteCond %{REQUEST_FILENAME} !-d

   RewriteRule . /htcm_front/index.html [L]

   </IfModule>

   注：/htcm_front/ index.html是你打包目錄的名字

   參考地址：http://www.javashuo.com/article/p-uasrtzng-ku.html

2、 Vue項目打包發佈nginx報錯：

（官方文檔也有介紹）

http://www.javashuo.com/article/p-zghughkp-be.html

#HTML5 History模式：

VUE-router默認hash模式---使用URL的hash來模擬一個完整的URL，因而當URL改變時，頁面不會從新加載。

若是不詳很醜的hash，咱們可使用路由的history模式，這種模式充分利用history.pushState  API來完成URL跳轉而無需從新加載頁面。

const route = new VueRouter({

       mode:‘history’,

routes: […]

}]

    當你使用history模式時，URL就像正常的url，列入http://test.com/user/id。也好看。

這種模式還須要後臺支持，由於咱們的因該是個單頁客戶端應用，若是後臺沒有正確配置，當用戶瀏覽時就會返回404。

因此，你要在服務端增長一個覆蓋全部狀況的候選資源：若是URL匹配不到任何靜態資源，則因該返回同一個index.html，這個頁面就是你app依賴的頁面。

後端配置例子，修改nginx配置文件:

這裏配置location的時候要注意一下：

root寫本身tomcat/webapps的路徑

proxy_pass 寫跳轉後的地址，好比我這裏是ip地址:端口號 ，注意後面不要加

這麼寫以後，就能實現vue的刷新功能了。

 

附Nginx經常使用命令：

啓動

./nginx 

 

檢查 nginx.conf配置文件

./nginx -t

 

重啓

./nginx -s reload

 

中止

 

./nginx -s stop

3、Vue項目打包發佈tomcat報錯：

遇到的問題：

使用webpack打包vue後，將打包好的文件，發佈到Tomcat上，訪問成功，可是刷新後頁面報404錯。

在網上查找了一下，原來是HTML5 History 模式引起的問題，具體爲何，vue官方已經給出瞭解釋，你能夠看https://router.vuejs.org/zh-cn/essentials/history-mode.html

可是看完問題又來了，官方給出的解決方案中沒有說tomcat下，怎麼決解。

 解決方案：

根據官方給出的解決方案原理

你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

因此在tomcat服務器下你能夠這麼作。在打包好的項目根目錄下新建一個WEB-INF文件夾，在WEB-INF中寫一個web.xml。

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee

           http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

  version="3.1" metadata-complete="true">

  <display-name>Router for Tomcat</display-name>

  <error-page>

    <error-code>404</error-code>

    <location>/index.html</location>

  </error-page>

</web-app>

這樣的目的就是一旦出現404就返回到 index.html 頁面。

最後還須要配置一下你的route，配置一個覆蓋全部的路由狀況，而後在給出一個 404 頁面。

const router = new VueRouter({

 mode: 'history',

 routes: [

  {

    path: '*',

    component: (resolve) => require(['./views/error404.vue'], resolve)

  }

 ]

})

以上所述是小編給你們介紹的Vue項目webpack打包部署到apache，nginx，tomcat刷新報404錯誤問題的解決方案，但願能幫助到您。