轉(zhuǎn)載請標(biāo)明出處：
http://dujinyang.blog.csdn.net/
本文出自:【奧特曼超人的博客】
@[TOC](Vue uni如何部署到服務(wù)器斩萌，并區(qū)分部署環(huán)境)
前端Vue
Vue 經(jīng)過這一年的進(jìn)化缝裤，模版也是相當(dāng)豐富了，但在使用多界面時颊郎，個人感覺還是有點(diǎn)弊端憋飞，CSS的樣式問題。
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架姆吭。
針對問題
多環(huán)境部署會引發(fā)很多問題榛做，當(dāng)然，是開發(fā)環(huán)境下了内狸，這次博主我也引發(fā)了這個小問題检眯，從而看到很多人對部署的環(huán)境會有疑問，畢竟Vue沒有暴漏出像JAVA那樣的可配置環(huán)境昆淡。
SyntaxError: Unexpected token p in JSON
- 需要區(qū)分 開發(fā)锰瘸、QA、預(yù)發(fā)布昂灵、生產(chǎn)等多個環(huán)境获茬，如何滿足？
- 怎么部署到服務(wù)器上自動判斷呢倔既？
對Uni-app 的使用也是這段時間好奇才去看了看恕曲，當(dāng)然，并不是去看使用渤涌，而是好奇整個架構(gòu)模版的生成佩谣，還是使用HBUILDER去開發(fā)，所以我們得注意兩件事情：
- Vue 只關(guān)注視圖層 实蓬， 采用自底向上增量開發(fā)的設(shè)計茸俭。
- Vue API 實(shí)現(xiàn)了數(shù)據(jù)綁定和視圖組件，所以安皱，很多人用
npm install后都會出現(xiàn)package的系列問題调鬓。
package.json描述
不管你安裝說明組件或模版，總是會看到目錄下 package.json 酌伊，那這個文件是做什么用的呢腾窝？其實(shí)這個文件相當(dāng)于 config ，所以你得注意 dist 或 lib 居砖。
多環(huán)境部署
很多人想要像AS或Gradle一樣去描述配置環(huán)境虹脯，類似下面這種偽判斷：
區(qū)分 開發(fā)、QA奏候、預(yù)發(fā)布循集、生產(chǎn)等多個環(huán)境
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 ''
}
有點(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)
}
其它代碼太多镶柱，暫時不貼了婆硬，大致意義就是解析package.json后，再去讀取H5的manifest配置奸例，所以最后發(fā)現(xiàn)彬犯，是manifest配置有問題，查找是多了 pubilcPath 查吊，去掉后谐区，SyntaxError: Unexpected token p 錯誤也就消失了。
因為當(dāng)代路徑就在目錄下了逻卖，所以打包的時候會引入了config宋列，那自己只需要再分開一份配置文件即可。
這樣就解決了评也，當(dāng)然也可以安裝個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"
這樣就不需要另外分開一份配置了盗迟，當(dāng)然坤邪，可以把當(dāng)前的BUILD_ENV設(shè)置到環(huán)境變量中，如果不是常用不建議設(shè)置罚缕。
語法：
cross-env xxx=xxx node build/build.js
那么最終的代碼：
let ENV = process.env.BUILD_ENV;
if (ENV == 'production') {
// 生產(chǎn)環(huán)境
} else if (ENV == 'QA') {
// 測試環(huán)境
}else if(ENV== 'TEST'){
// 開發(fā)測試
}
也可以自己去定義個全局變量使用艇纺，或者修改index下的源碼，那樣比較麻煩邮弹，小編我是修改了黔衡，不過 所有的項目都能用特定的字段去使用了。
作者：奧特曼超人Dujinyang
來源：CSDN
原文：https://dujinyang.blog.csdn.net/
版權(quán)聲明：本文為博主杜錦陽原創(chuàng)文章腌乡，轉(zhuǎn)載請附上博文鏈接盟劫！
