[實操]發佈Vuejs項目_持續更新。。。

文件名稱	版本號	qq	備註
實操-發佈Vuejs項目v0.0.1_持續更新。。。	v0.0.1	8416837	前後端分離之前端

---

構建

# 在項目根目錄執行
cnpm run build:prod

在根目錄生成了一個dist，裏面就是靜態文件。
但是這樣和源碼混在一起了，不合適，於是修改vue.config.js,改爲outputDir: '../dist',再次build，dist就跑到根目錄外面去了。


體積比較大，可以考慮進一步壓縮,技術：gzip。

Nginx配置-文檔參見筆者的博文

進入nginx conf目錄，更新配置文件，

vim nginx.conf

內容

  1 server{
  2   listen 9528;  #監聽的端口
  3   server_name localhost; #監聽的域名
  4   location / {
  5   root /home/project/vue/html/dist; #網站所在路徑
  6   index index.html; #默認的首頁文件,好似單頁入口
  7   }     
  8 }

將上文的dist.zip上傳後，解壓到/home/project/vue/html/，這裏會增加自動化部署。
訪問http://192.168.xx.xxx:9528/index.html，出現了頁面：

簡單部署成功

點擊登錄時，發現報錯了：

Uncaught SyntaxError: Unexpected token } in JSON at position 46
    at JSON.parse (<anonymous>)
    at c (app.cd22f8bd.js:1)
    at Object.template (app.cd22f8bd.js:1)

報錯和mock相關，但是生產已經不需要mock數據了。
報錯在這句：

JSON.parse('{"'+decodeURIComponent(t).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"').replace(/\+/g," ")+'"}'):

既然和mock相關，就根據蛛絲馬跡尋找，在框架發現了這一句註釋：

上線之前，請刪除mock，於是註釋掉mock

// import { mockXHR } from '../mock'
// if (process.env.NODE_ENV === 'production') {
//   mockXHR()
// }

並且修改環境配置：

lintOnSave: process.env.NODE_ENV === 'production',
// lintOnSave: process.env.NODE_ENV === 'development',

重新部署，成功了。注：勿須重啓nginx。