2. 程式人生 > >解決vue專案route使用history模式，tomcat部署重新整理url 404問題

解決vue專案route使用history模式，tomcat部署重新整理url 404問題

阿新 • • 發佈：2018-11-15

在webapps/專案名 建立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>
 
 
 
 
 
 

 
   
 
 
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
解決vue專案route使用history模式，tomcat部署重新整理url 404問題

     
 在webapps/專案名 建立WEB-INF ，建立web.xml檔案 
檔案內容如下： 
 
  
 <?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmln 



  
 

    


    
    
完美解決vue專案中彈出框滑動時，內部頁面也跟著滑動問題

     
  
 
 在main.js中設定全域性函式： 
 //彈出框禁止滑動
Vue.prototype.noScroll = function () {
  var mo = function (e) {& 



  
 

    


    
    
centos安裝jdk，tomcat部署專案筆記

     
  
  
  
 centos安裝jdk，tomcat部署專案 1、xrandr xrandr -s 1360x768 設定解析度 2、清屏 clear 一、jdk的安裝步驟： 1、下載2、準備目錄3、安裝、4、配置環境變數5、測試java -version 3、建立目錄： mkdir /user/java/ 



  
 

    


    
    
解決vue專案在瀏覽器中開啟後，#後面的連結被擷取的問題

     
  
  
  
 在做微信公眾號下載的時候遇到了這個問題： 
 微信公眾號下載，做的是彈框提示，在瀏覽器中開啟，結果在手機瀏覽器中開啟的總是#之前的連結： 
 例如：http://yy2jd7.natappfree.cc/#/download,手機瀏覽器上開啟的頁面連結：http://yy2jd7.natap 



  
 

    


    
    
解決vue專案執行過程中，npm run dev 報錯問題

     
 
                ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] dev: `node build/dev-server.js`npm ERR! Exit status 1npm ERR!npm ERR!  



  
 

    


    
    
vue專案打包後，npm run build相關配置，以及解決專案打包後，圖片404，背景圖片找不到，iview程式碼出問題的情況

     
 
                1.首先找到config下的index.js檔案 將build下的assetsPublicPath的斜槓換成./ 操作如下

只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過後 npm run dev的時候直接出現can not Ge 



  
 

    


    
    
maven整合SSM專案，Tomcat部署執行——SSM整合框架搭建

     
 
                                                        開發十年，就只剩下這套架構體系了！
>>>   
                                        
              



  
 

    


    
    
在nginx上部署vue專案(history模式)--demo實列；

     
 在很早之前，我寫了一篇 關於 在nginx上部署vue專案(history模式) 但是講的都是理論，所以今天做個demo來實戰下。有必要讓大家更好的理解，我發現搜尋這類似的問題還是挺多的，因此在寫一篇有關這方面的實戰文章。在講解之前，我們還是和以前一樣，一步步來，先看下我們專案的整個架構。

| 



  
 

    


    
    
nginx代理，tomcat部署服務器，後端獲取客戶端真實ip

     
 nginx代理   獲取真實ip   1、環境部署說明後端部署在tomcat服務器上，前端用nginx做代理訪問tomcat部署目錄nginx配置：upstream wcfront{
    server  localhost:8991;//後臺接口
}

server {
    listen        



  
 

    


    
    
Vue專案打包後，靜態資源路徑出錯

     
  
  
  
  
  一，css、js路徑出錯 
  
 1.1 特徵： 這種情況表現為頁面顯示是空白的！ 
  
 1.2 解決方案 
 進入config ==> index.js 檔案
 
  
  
  二，圖片路徑出錯 
  
 2.1 特徵： 本地測試沒問題，但是打包之後，路徑就亂了  
 



  
 

    


    
    
在編寫Vue專案的時候，給陣列的第一位新增物件資料

     
 
								
								            
						
                核心程式碼如下：

     this.menuBar.unshift({
          title:"全部",
          id:13
        })





全部程式碼如下：
 



  
 

    


    
    
解決vue專案在ie11下一片空白並報promise undefined的錯

     
 
                問題：

     vue專案在ie11下一片空白並報promise undefined的錯

原因：

     ie11瀏覽器解析不了es6的語法，需要我們使用babel（Babel是一種工具鏈，主要用於將ECMAScript 2015+程式碼轉換為當前和舊版瀏覽器或環境 



  
 

    


    
    
解決 vue 專案啟動後不能被外部IP訪問

     
 
								
								            
							
							
							解決 webpack-dev-serveri 啟動後通過外部訪問報錯 invalid host header
修改 config/index.js 的 host 屬性為 ‘0.0.0.0’
{
// . 



  
 

    


    
    
解決vue專案eslint校驗  Do not use 'new' for side effects 的兩種方法

     
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  render: h => h(App),
  router
})


 當使用eslin 



  
 

    


    
    
解決vue專案首頁載入過慢的情況

     
 
								
								            
							
							
							
什麼導致了首頁初步載入過慢
請看下面一張圖就清楚了

即app.js檔案過大導致的。。。
如何來處理
vue-route 懶載入
component： resolve => require([' 



  
 

    


    
    
vue專案如何使頁面後退不重新整理，且還原滾動條位置

     
  
 
 
        新指令化管理滾動狀態地址https://blog.csdn.net/theoneEmperor/article/details/82669022(歡迎star)，滾動條儲存以及回退只需要一條指令，讓你為所欲為。 
     



  
 

    


    
    
解決Vue axios post請求，後臺獲取不到資料問題

     
 
                最近做專案，需要用到vue,後臺是php,第一次使用axios進行請求，本以為同ajax一樣，會很簡單，但是結果往往不讓人滿意啊，get請求很簡單，這裡就不說了，主要說下 post請求方式。使用axios進行post請求，後臺居然接收不到資料，這就納悶了，於是網上一頓搜尋，現 



  
 

    


    
    
解決VUE專案不相容IE瀏覽器問題

     
 
                非常簡單，只需要兩步就能解決：

1、 安裝外掛babel-polyfill 

      npm install --save-dev babel-polyfill   

2、在你的VUE專案的src目錄下找到main.js

     新增下面一行程式碼：

     



  
 

    


    
    
vue專案基於node打包編譯部署

     
 
                一·專案啟動

1·進入專案目錄下的終端執行命令

npm run dev



正常情況如下圖，如遇到錯誤不會編譯成功，且編譯後的html檔案不能正常渲染。





二·專案編譯

1·進入專案目錄下的終端執行命令

npm run build



正常情況如下圖，如遇 



  
 

    


    
    
vue 路由引數變化，頁面不重新整理，provide /inject 完美解決方案

     
 
							
							
							此方法使用的是v-if來控制router-view的顯示或隱藏，v-if從false變為true時，vue會重新渲染router-view區域，所以當引數變化時，只需讓v-if 從true => false => false,就能實現頁面重新整理;