vue cli 4 多环境-ag凯发k8国际

转载请标明出处：

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

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

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 ，那这个文件是做什么用的呢？其实这个文件相当于 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') { }

会报错？来看看源码到底是为何……

查看源码获取ag凯发k8国际的解决方案

来看下源码，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 与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是ag凯发k8国际为你收集整理的vue cli 4 多环境_vue 前端uni-app多环境配置部署服务器的问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。