轉(zhuǎn)載請(qǐng)標(biāo)明出處：

https://dujinyang.blog.csdn.net/article/details/100831712/

本文出自:【奧特曼超人的博客】

前端Vue

Vue 經(jīng)過這一年的進(jìn)化，模版也是相當(dāng)豐富了，但在使用多界面時(shí)，個(gè)人感覺還是有點(diǎn)弊端，CSS的樣式問題。

Vue.js(讀音 /vju?/, 類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。

針對(duì)問題

多環(huán)境部署會(huì)引發(fā)很多問題，當(dāng)然，是開發(fā)環(huán)境下了，這次博主我也引發(fā)了這個(gè)小問題，從而看到很多人對(duì)部署的環(huán)境會(huì)有疑問，畢竟Vue沒有暴漏出像JAVA那樣的可配置環(huán)境。

SyntaxError: Unexpected token p in JSON

• 需要區(qū)分 開發(fā)、QA、預(yù)發(fā)布、生產(chǎn)等多個(gè)環(huán)境，如何滿足？
• 怎么部署到服務(wù)器上自動(dòng)判斷呢？

對(duì)Uni-app 的使用也是這段時(shí)間好奇才去看了看，當(dāng)然，并不是去看使用，而是好奇整個(gè)架構(gòu)模版的生成，還是使用HBUILDER去開發(fā)，所以我們得注意兩件事情：

Vue 只關(guān)注視圖層 ， 采用自底向上增量開發(fā)的設(shè)計(jì)。

Vue API 實(shí)現(xiàn)了數(shù)據(jù)綁定和視圖組件，所以，很多人用 npm install 后都會(huì)出現(xiàn)package的系列問題。

package.json描述

不管你安裝說明組件或模版，總是會(huì)看到目錄下 package.json ，那這個(gè)文件是做什么用的呢？其實(shí)這個(gè)文件相當(dāng)于 config ，所以你得注意 dist 或 lib 。

多環(huán)境部署

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

區(qū)分 開發(fā)、QA、預(yù)發(fā)布、生產(chǎn)等多個(gè)環(huán)境 if (process.env.ENV === 'development') { } if (process.env.ENV === 'QA') { } if (process.env.ENV === 'pre-release') { } if (process.env.ENV === 'production') { }

會(huì)報(bào)錯(cuò)？來看看源碼到底是為何……

查看源碼獲取解決方案

來看下源碼，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 '' }

有點(diǎn)多，抽取一下：

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) }

其它代碼太多，暫時(shí)不貼了，大致意義就是解析package.json后，再去讀取H5的manifest配置，所以最后發(fā)現(xiàn)，是manifest配置有問題，查找是多了 pubilcPath ，去掉后，SyntaxError: Unexpected token p 錯(cuò)誤也就消失了。

因?yàn)楫?dāng)代路徑就在目錄下了，所以打包的時(shí)候會(huì)引入了config，那自己只需要再分開一份配置文件即可。

這樣就解決了，當(dāng)然也可以安裝個(gè)cross-env ，安裝代碼：

npm install --save-dev cross-env

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

"build": "cross-env BUILD_ENV=production node build/build.js 與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue cli 4 多环境_Vue 前端uni-app多环境配置部署服务器的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。