vue項目部署到nginx/tomcat服務器的實現(xiàn)
開發(fā)完的vue項目，需要部署到Nginx/Tomcat服務器上運行，作為一個前端小白，剛接觸vue不久，研究了一番，于是寫下這篇文章，記錄下來便于今后部署。
1.router(history)模式vue項目部署到nginx
1）修改router模式為history（默認為hash）
const router = new VueRouter({
routes,
mode: 'history'
});
對路由模式不清楚的小伙伴，可以看這篇vue-router路由模式詳解
2）修改config/index.js，build下靜態(tài)資源路徑，完成后執(zhí)行npm run build打包
3）修改nginx配置
server {
listen 80;//代理端口
server_name 192.168.0.152;//代理名稱（域名、ip）
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root test; //項目存放的地址（當前服務器位置）
index /index.html;
try_files $uri $uri/ @router; //一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，返回同一個 index.html 頁面
}
location @router {
rewrite ^.*$ /index.html last;
}
}
運行結(jié)果：
2.vue項目部署到tomcat
1）項目上線，一般需要添加項目名，并且消去vue-router產(chǎn)生的#號，需要在router配置
const router = new VueRouter({
routes,
mode: 'history',
base: '/test/'//項目名稱 訪問路由頁面都需要加上這個,訪問的根路徑為http://ip:port/test
});
2）修改config/index.js，build下靜態(tài)資源路徑與base的取值一致
3）tomcat的配置
在tomcat的webapps新建文件夾，文件夾名稱和上面配置的根路徑一致，即為test，然后將打包生成的dist文件夾里面的文件復制到test下，并且新建文件WEB-INF/web.xml。
項目結(jié)構為：
WEB-INF目錄下新增web.xml內(nèi)容為：
//覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，返回同一個 index.html頁面
<?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>
詳細了解可看vue官方文檔后端配置HTML5 History 模式
4）重新啟動tomcat
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure
本篇文章主要介紹了詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
基于Vue2-Calendar改進的日歷組件（含中文使用說明）
這篇文章主要介紹了基于Vue2-Calendar改進的日歷組件（含中文使用說明）的相關知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)
Vue 創(chuàng)建組件的方法有哪些呢？下面小編就為大家分享一篇Vue 創(chuàng)建組件的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了最新vue-cli 2.9.1的webpack存在問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
VS?Code打開vue文件出現(xiàn)很多黃色波浪線的完美解決辦法
作為一名經(jīng)驗豐富的開發(fā)者,下面這篇文章主要給大家介紹了關于VS?Code打開vue文件出現(xiàn)很多黃色波浪線的完美解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-04-04
vue?openlayers實現(xiàn)臺風軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實現(xiàn)臺風軌跡示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實例
下面小編就為大家?guī)硪黄猇ue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
在Vue進行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關于VUE事件處理之@click用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧2018-03-03