Vue 前端uni-app多环境配置部署服务器的问题
目录
@(Vue uni如何部署到服务器,并区分部署环境) 前端VueVue 经过这一年的进化,模版也是相当丰富了,但在使用多界面时,个人感觉还是有点弊端,CSS的样式问题。
针对问题多环境部署会引发很多问题,当然,是开发环境下了,这次博主我也引发了这个小问题,从而看到很多人对部署的环境会有疑问,毕竟Vue没有暴漏出像JAVA那样的可配置环境。 SyntaxError: Unexpected token p in JSON
对Uni-app 的使用也是这段时间好奇才去看了看,当然,并不是去看使用,而是好奇整个架构模版的生成,还是使用HBUILDER去开发,所以我们得注意两件事情:
package.json描述不管你安装说明组件或模版,总是会看到目录下 多环境部署很多人想要像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 ,去掉后, 因为当代路径就在目录下了,所以打包的时候会引入了config,那自己只需要再分开一份配置文件即可。 这样就解决了,当然也可以安装个 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" 这样就不需要另外分开一份配置了,当然,可以把当前的 语法: 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下的源码,那样比较麻烦,小编我是修改了,不过 所有的项目都能用特定的字段去使用了。
|| 版权声明:本文为博主杜锦阳原创文章,转载请注明出处。 作者:奥特曼超人Dujinyang 来源:CSDN 原文:https://dujinyang.blog.csdn.net/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |