項目開發完成,接下來是上線,關於vue
項目的部署,我司前端是部署在nginx
服務器上,關於nginx
的相關文檔,請自行查閱;本文只記錄部署時碰到的一些問題。css
vue
項目打包後,是生成一系列的靜態文件,包括項目的請求IP
都打入包內,若是後臺服務改動,這時你的前端文件,又要從新編譯打包,這裏採用的是後臺管理項目總結提到的前端自行請求一個配置文件,動態修改你的相關配置。html
// config.json { "api": "test.com" }
在項目store
中請求你的配置文件,寫入state
中,在調用的時候能夠全局訪問到你的配置前端
// api.js GetConfigApi() { return new Promise((resolve, reject) => { axios .get(`/config.json?v=${new Date().getTime()}`) .then(result => { const configApi = { API: result.data['api'], // 統一接口 }; resolve(configApi); }) .catch(error => { reject(error); }); }); }
由於vue-router
有hash
和history
不一樣的兩種模式,使用不一樣的模式,nginx
的配置不一樣,hash
模式下,不須要改動,只須要部署你的前端文件就能夠了,因此這裏只討論history
模式下.conf
文件的修改vue
訪問修改nginx
配置文件nginx.conf
webpack
server { listen 80; server_name test.com; location / { root /front; // 前端文件路徑 index index.html; // hash模式只配置訪問html就能夠了 try_files $uri $uri/ /index.html; // history模式下 } }
修改完成,重啓服務訪問test.com
ios
當咱們須要把項目部署到子級目錄下時,則須要修改項目的BASE_URL
,生成一個子級目錄下的絕對訪問路徑。修改對應的.conf
配置文件nginx
server { listen 80; server_name test.com; location /demo { // 子級目錄 alias /front/demo; index index.html; try_files $uri $uri/ /demo/index.html; } }
修改完成,重啓服務訪問test.com/demo
web
前端項目的靜態文件經常會被瀏覽器緩存,而項目編譯後,js
,css
,圖片等其實是已經有hash
值來去除了緩存,可是項目更新後,仍然會出現緩存問題,這是因爲咱們的項目整個入口都是在index.html
文件上,瀏覽器實際是緩存了咱們的html
頁面,因此咱們要在nginx
中告訴瀏覽器,html
文件不被緩存。vue-router
location /demo { add_header Cache-Control 'private, no-store, max-age=0'; ... }
這裏只討論了nginx
相關的部署,實際上vue-router
文檔上是有相關的配置例子的。json
其餘總結文章: