转载请标明出处：
http://dujinyang.blog.csdn.net/
本文出自:【奥特曼超人的博客】
@[TOC](Vue uni如何部署到服务器，并区分部署环境)
前端Vue
Vue 经过这一年的进化，模版也是相当丰富了，但在使用多界面时，个人感觉还是有点弊端，CSS的样式问题。
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
针对问题
多环境部署会引发很多问题，当然，是开发环境下了，这次博主我也引发了这个小问题，从而看到很多人对部署的环境会有疑问，毕竟Vue没有暴漏出像JAVA那样的可配置环境。
SyntaxError: Unexpected token p in JSON
- 需要区分 开发、QA、预发布、生产等多个环境，如何满足？
- 怎么部署到服务器上自动判断呢？
对Uni-app 的使用也是这段时间好奇才去看了看，当然，并不是去看使用，而是好奇整个架构模版的生成，还是使用HBUILDER去开发，所以我们得注意两件事情：
- Vue 只关注视图层 ， 采用自底向上增量开发的设计。
- 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下的源码，那样比较麻烦，小编我是修改了，不过 所有的项目都能用特定的字段去使用了。
- KARL-Dujinyang .link.
作者：奥特曼超人Dujinyang
来源：CSDN
原文：https://dujinyang.blog.csdn.net/
版权声明：本文为博主杜锦阳原创文章，转载请附上博文链接！