Vue 前端uni-app多环境配置部署服务器的问题前端VueVue经过这一年的进化，模版也是相当丰富了，但在使用多界面

前端Vue

Vue 经过这一年的进化，模版也是相当丰富了，但在使用多界面时，个人感觉还是有点弊端，CSS的样式问题。

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

针对问题

多环境部署会引发很多问题，当然，是开发环境下了，这次博主我也引发了这个小问题，从而看到很多人对部署的环境会有疑问，毕竟Vue没有暴漏出像JAVA那样的可配置环境。

SyntaxError

: Unexpected token p

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

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

(manifestJson.transformPx ===

false

) { process.UNI_TRANSFORM_PX =

false

}

else

{ process.UNI_TRANSFORM_PX =

true

}

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

(jsonFiles && jsonFiles.length) { jsonFiles.forEach(jsonFile => { jsonFile && checkEmitFile(jsonFile.name, jsonFile.content, changedEmitFiles) }) } changedEmitFiles.forEach(name => {

this

.emitFile(name +

'.json'

, emitFileCaches[name]) })

return

}

有点多，抽取一下：

(manifestJson.transformPx ===

false

) { process.UNI_TRANSFORM_PX =

false

}

else

{ process.UNI_TRANSFORM_PX =

true

}

(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;

(ENV ==

'production'

) {

// 生产环境

}

else

(ENV ==

'QA'

) {

// 测试环境

}

else

(ENV==

'TEST'

){

// 开发测试

}

也可以自己去定义个全局变量使用，或者修改index下的源码，那样比较麻烦，小编我是修改了，不过 所有的项目都能用特定的字段去使用了。

更多技术资讯可关注:itheimaGZ获取(公冢号)