Vue前端uni-app多环境配置部署服务器Evolution的问题，模板也挺丰富的，但是在使用多接口的时候，个人感觉还是有一些不足，比如CSS样式问题。Vue.js（读作/vju?/，类似于视图）是一个用于构建用户界面的渐进式框架。多环境部署会带来很多问题。当然是在开发环境中。这次也是我作为博主造成的这个小问题，可见很多人对部署环境的疑惑。毕竟Vue还没有暴露过像JAVA那样的可配置环境。SyntaxError:UnexpectedtokenpinJSON需要区分开发、QA、预发布、生产等多种环境。如何满足？如何部署到服务器进行自动判断？Uni-app的使用在我去看之前的这段时间也很好奇。当然不是看使用，而是好奇整个架构模板的生成，或者使用HBUILDER开发，所以要注意两点：Vue只关注视图层，采用自下而上的增量开发设计。VueAPI实现了数据绑定和视图组件，所以很多人在使用npminstall之后都会出现一系列的打包问题。package.json描述无论你安装指令组件还是模板，你总会在目录中看到package.json，那么这个文件的作用是什么？其实这个文件相当于config，所以要注意dist或者lib。多环境部署很多人想像AS或者Gradle这样描述配置环境，类似下面的误判：区分开发、QA、预发布、生产等多个环境if(process.env.ENV==='开发”){}if(process.env.ENV==='QA'){}if(process.env.ENV==='预发布'){}if(process.env.ENV==='production'){}会报错？看看源码是什么。。。查看源码获取解决方案，看源码。path路径读取的key是path，所以：constpath=require('path')其他可以忽略，重要的是下面这段：module.exports=function(content){if(process.env.UNI_USING_COMPONENTS||process.env.UNI_PLATFORM==='h5'){returnrequire('./index-new').call(this,content)}this.cacheable&&this.cacheable()constmanifestJsonPath=path.resolve(process.env.UNI_INPUT_DIR,'manifest.json')constmanifestJson=parseManifestJson(fs.readFileSync(manifestJsonPath,'utf8'))this.addDependency(manifestJsonPath)constpagesJson=parsePagesJson(content)如果(manifestJson.transformPx===false){process.UNI_TRANSFORM_PX=false}else{process.UNI_TRANSFORM_PX=true}if(process.env.UNI_PLATFORM==='h5'){returnrequiree('./platforms/h5')(pagesJson,manifestJson)}constchangedEmitFiles=[]functioncheckPageEmitFile(pagePath,pageStyle){checkEmitFile(pagePath,parseStyle(pageStyle),changedEmitFiles)}parsePages(pagesJson,函数(页面){checkPageEmitFile(page.path,page.style)},function(root,page){checkPageEmitFile(normalizePath(path.join(root,page.path)),page.style)})常量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配置有问题。搜索中的publiccPath过多。去掉之后，SyntaxError:Unexpectedtokenp的错误就会消失，因为当前路径在目录下，所以打包的时候会引入config，所以你只需要单独另外复制一份配置文件就可以了。这解决了它。当然你也可以安装一个cross-env。安装代码：npminstall--save-devcross-env这种情况下，我们可以定义："build":"cross-envBUILD_ENV=productionnodebuild/build.js","QA":"cross-envBUILD_ENV=QAnodebuild/build.js","TEST":"cross-envBUILD_ENV=TESTnodebuild/build.js"这样就不用另外单独配置了，当然你可以把当前的BUILD_ENV设置为环境变量，如果不常用，不建议设置。语法：cross-envxxx=xxxnodebuild/build.js然后最后的代码：letENV=process.env.BUILD_ENV;if(ENV=='production'){//生产环境}elseif(ENV=='QA'){//测试环境}elseif(ENV=='TEST'){//开发测试}也可以自己定义一个全局变量自己用，或者修改index下的源码，比较麻烦。我已修改，但所有项目都可以用于特定字段。KARL-都锦洋.link.||版权声明：本文为博主杜金洋原创文章，转载请注明出处。作者：奥特曼超人杜金洋来源：CSDN原文：https://dujinyang.blog.csdn.net/版权声明：本文为博主原创文章，转载请附上博文链接！
