vue項目打包部署到tomcat或nginx伺服器

vue項目部署到tomcat或nginx伺服器url通路不報404

一.vue項目配置

查了不少資料網上關于vue項目打包部署到tomcat或nginx伺服器沒有詳細的介紹，特寫本篇文章一做總結。以下是詳細步驟

1.修改項目中router/index.js

// 找到路由所在路徑，具體路徑有些項目不相同
export default new Router({
    //一定要在路由中添加下面代碼
    mode: 'history', // 後端支援可開  作用是去掉路由中的#号，預設是hash即是路由中有#号
    base: 'admin',//項目名稱tomcat webapp 目錄下應該建該目錄結構
})
           

2.修改項目中config/index.js

// 修改build下的配置
assetsPublicPath: '/admin/', 
           

二 .部署項目到tomcat伺服器

1.tomcat webapp目錄下建立檔案夾

1.在webApp目錄下建立admin檔案夾
2.把vue打包的dist目錄下的檔案copy到admin目錄下
           

2.配置Tomcat 伺服器

在tomcat的config目錄下的web.xml下添加以下代碼
  <display-name>webapp</display-name>
  <description>
       webapp
  </description>
  <error-page>  
     <error-code>404</error-code>  
     <location>/</location>  
  </error-page> 
           

注意：該步驟代碼是為了讓在用url連結通路時不報404錯誤

三.部署項目到nginx伺服器

1.建立nginx項目目錄

1.在nginx伺服器中/user/local/nginx/html目錄下建立admin檔案夾
2.把vue打包的dist目錄下的檔案copy到admin目錄下
           

2.配置nginx

server {
        listen       8888; 監聽端口号
        server_name  10.45.4.218; #項目部署的伺服器的ip位址
       
	   location /admin { #通路到admin項目的根路徑
            root   /usr/local/nginx/html;
            index  index.html index.htm;
			try_files $uri $uri/ @router; #需要指向下面的@router否則會出現vue的路由在nginx中重新整理出現404
        }

        location @router  { #指向路由防止重新整理報404
            rewrite ^.*$ /admin/index.html last;
        }
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
           

注意：該步驟代碼是為了讓在用url連結通路時不報404錯誤

admin為項目名稱是自己取的，可以改成其他的，但上述三個步驟中的該admin要相同