Vue 前端uni-app多環境配置部署伺服器的問題

  • 2019 年 10 月 3 日
  • 筆記

目錄

轉載請標明出處：
http://dujinyang.blog.csdn.net/
本文出自:【奧特曼超人的部落格】

@(Vue uni如何部署到伺服器，並區分部署環境)

前端Vue

Vue 經過這一年的進化，模版也是相當豐富了，但在使用多介面時，個人感覺還是有點弊端，CSS的樣式問題。

Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶介面的漸進式框架。

針對問題

多環境部署會引發很多問題，當然，是開發環境下了，這次部落客我也引發了這個小問題，從而看到很多人對部署的環境會有疑問，畢竟Vue沒有暴漏出像JAVA那樣的可配置環境。

SyntaxError: Unexpected token p in JSON
  • 需要區分 開發、QA、預發布、生產等多個環境，如何滿足？
  • 怎麼部署到伺服器上自動判斷呢？

對Uni-app 的使用也是這段時間好奇才去看了看，當然，並不是去看使用，而是好奇整個架構模版的生成，還是使用HBUILDER去開發，所以我們得注意兩件事情：

  1. Vue 只關注視圖層 ， 採用自底向上增量開發的設計。
  2. Vue API 實現了數據綁定和視圖組件，所以，很多人用 npm install 後都會出現package的系列問題。

package.json描述

不管你安裝說明組件或模版，總是會看到目錄下 package.json ，那這個文件是做什麼用的呢？其實這個文件相當於 config ，所以你得注意 dist 或 lib 。

多環境部署

很多人想要像AS或Gradle一樣去描述配置環境，類似下面這種偽判斷：

區分 開發、QA、預發布、生產等多個環境  if (process.env.ENV === 'development') {    }    if (process.env.ENV === 'QA') {    }    if (process.env.ENV === 'pre-release') {    }    if (process.env.ENV === 'production') {    }

會報錯？來看看源碼到底是為何……

查看源碼獲取解決方案

來看下源碼，path路徑讀取的Key是path ，所以：

const path = require('path')

其它可以忽略，重要的是下面這段：

module.exports = function (content) {    if (process.env.UNI_USING_COMPONENTS || process.env.UNI_PLATFORM === 'h5') {      return require('./index-new').call(this, content)    }      this.cacheable && this.cacheable()      const manifestJsonPath = path.resolve(process.env.UNI_INPUT_DIR, 'manifest.json')    const manifestJson = parseManifestJson(fs.readFileSync(manifestJsonPath, 'utf8'))      this.addDependency(manifestJsonPath)      const pagesJson = parsePagesJson(content)      if (manifestJson.transformPx === false) {      process.UNI_TRANSFORM_PX = false    } else {      process.UNI_TRANSFORM_PX = true    }    if (process.env.UNI_PLATFORM === 'h5') {      return require('./platforms/h5')(pagesJson, manifestJson)    }      const changedEmitFiles = []      function checkPageEmitFile (pagePath, pageStyle) {      checkEmitFile(pagePath, parseStyle(pageStyle), changedEmitFiles)    }      parsePages(pagesJson, function (page) {      checkPageEmitFile(page.path, page.style)    }, function (root, page) {      checkPageEmitFile(normalizePath(path.join(root, page.path)), page.style)    })      const jsonFiles = require('./platforms/' + process.env.UNI_PLATFORM)(pagesJson, manifestJson)      if (jsonFiles && jsonFiles.length) {      jsonFiles.forEach(jsonFile => {        jsonFile && checkEmitFile(jsonFile.name, jsonFile.content, changedEmitFiles)      })    }      changedEmitFiles.forEach(name => {      this.emitFile(name + '.json', emitFileCaches[name])    })      return ''  }

有點多，抽取一下：

  if (manifestJson.transformPx === false) {      process.UNI_TRANSFORM_PX = false    } else {      process.UNI_TRANSFORM_PX = true    }    if (process.env.UNI_PLATFORM === 'h5') {      return require('./platforms/h5')(pagesJson, manifestJson)    }

其它程式碼太多，暫時不貼了，大致意義就是解析package.json後，再去讀取H5的manifest配置，所以最後發現，是manifest配置有問題，查找是多了 pubilcPath ，去掉後，SyntaxError: Unexpected token p 錯誤也就消失了。

因為當代路徑就在目錄下了，所以打包的時候會引入了config，那自己只需要再分開一份配置文件即可。

這樣就解決了，當然也可以安裝個cross-env ，安裝程式碼：

npm install --save-dev cross-env

這樣的話，我們可以定義：

"build": "cross-env BUILD_ENV=production node build/build.js",  "QA": "cross-env BUILD_ENV=QA node build/build.js",  "TEST": "cross-env BUILD_ENV=TEST node build/build.js"

這樣就不需要另外分開一份配置了，當然，可以把當前的BUILD_ENV設置到環境變數中，如果不是常用不建議設置。

語法：

cross-env xxx=xxx node build/build.js

那麼最終的程式碼：

 let ENV = process.env.BUILD_ENV;      if (ENV == 'production') {      // 生產環境    } else if (ENV == 'QA') {      // 測試環境    }else if(ENV== 'TEST'){      // 開發測試    }

也可以自己去定義個全局變數使用，或者修改index下的源碼，那樣比較麻煩，小編我是修改了，不過 所有的項目都能用特定的欄位去使用了。

|| 版權聲明：本文為部落客杜錦陽原創文章，轉載請註明出處。

作者：奧特曼超人Dujinyang

來源：CSDN

原文：https://dujinyang.blog.csdn.net/

版權聲明：本文為部落客原創文章，轉載請附上博文鏈接！

Tags:

VirMach 便宜 VPS