Vue 前端uni-app多环境配置部署服务器的问题

前端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‘) {    returnrequire(‘./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‘) {    returnrequire(‘./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下的源码,那样比较麻烦,小编我是修改了,不过 所有的项目都能用特定的字段去使用了。

 更多技术资讯可关注:gzitcast

Vue 前端uni-app多环境配置部署服务器的问题

上一篇:JSON


下一篇:五、MapReduce普通排序例子--统计手机号流量