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

KARL-Dujinyang .link.

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

vue cli 4 多环境_Vue 前端uni-app多环境配置部署服务器的问题
转载请标明出处: https://dujinyang.blog.csdn.net/article/details/100831712/ 本文出自:[奥特曼超人的博客] 前端Vue Vue 经过这一年的 ...
thinkphp后台管理系统+vue前端H5 app
thinkphp后台管理系统+vue前端H5 app 众包接单型App 全部源码已发布,欢迎star, 移步码云前言 1.帮朋友做的一个接单类型的后台管理系统(朋友的需求是淘宝好评刷管理) 2.目前 ...
App自动化环境配置及安装
第一步我们先确认你的python 是否是3.0以上的版本然后我们进入pychar项目,下载外部库:Appium-Python-Client 在终端输入命令 pip install Appium-P ...
get request uni 参数_uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装...
1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV ...
怎么配置服务器php环境,配置PHP服务器环境步骤详解
本节内容: 搭建与配置php服务器环境. 1,下载软件 PHP的建议下载zip包,原因installer的我安装下来,发现根目录下少很多文件,虽说很智能,自动配置apache等,但是也有很多限制,不利 ...
【物联网】windows环境配置mqtt服务器
配置mqtt服务器一.安装EMQX开源版二.网页端三.配置客户端连接用户名密码四.MQTT X 桌面客户端工具一.安装EMQX开源版到官网下载下载地址 V4.4.10 下载之后解压缩,c ...
linux系统下docker搭建vue前端项目开发运行环境详解
1. 初衷最近做了几个前后端项目,在前后端项目链条的时候,发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错, npm install一直无法安装,但是我在linux系统下面安 ...
关于 SAP Spartacus 支持不同的环境配置部署到 SAP Commerce Cloud 上的讨论
参考这个讨论:Introduce environment specific configurations for Spartacus deployment on ccv2 对于 angular 开发人 ...
python 安卓app开发环境搭建_基于react-native的APP开发环境配置
1. 首先要有jdk 版本1.8 环境变量必须要有 %JAVA_HOME%;%JAVA_HOME%\bin 2.python 版本2 必须是python2(官方文档这么写的,具体 ...

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

Vue uni如何部署到服务器，并区分部署环境