转载请标明出处:
http://dujinyang.blog.csdn.net/
本文出自:【奥特曼超人的博客】
@
前端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下的源码,那样比较麻烦,小编我是修改了,不过 所有的项目都能用特定的字段去使用了。
|| 版权声明:本文为博主杜锦阳原创文章,转载请注明出处。
作者:奥特曼超人Dujinyang
来源:CSDN
原文:https://dujinyang.blog.csdn.net/
版权声明:本文为博主原创文章,转载请附上博文链接!
Vue 前端uni-app多环境配置部署服务器的问题的更多相关文章
-
前端移动App开发环境搭建
移动App开发环境安装 一.环境安装准备软件 二.node的安装 像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init .npm install -g ...
-
APP自动化环境配置
做自动化很多人都不喜欢做app自动化,说实话,我也不喜欢做app自动化,但是没办法,老板给你钱,让你做,不得不做! 其实app自动化的难点就在于环境,环境OK了之后一切都和web自动化差不多,顶多就是 ...
-
app自动化测试环境配置:adb环境配置、monkey环境配置、appium环境配置大全
1. 安装jdk 2. 安装配置Andriod sdk 安装Andriod sdk前首先需要安装配置好jdk环境. 然后安装Android sdk 安装完成后需要配置环境变量:ANDROID_HOME ...
-
Tomcat环境配置部署测试环境及架构
Tomcat环境配置已经在前面介绍过了,这边就为童鞋们介绍下对于Tomcat的架构是怎么样的! Tomcat的架构包含(bin.conf.lib.logs.temp.wenapps.work)等文件夹 ...
-
Lisp-01: 相关开发环境配置部署
Common Lisp 学习笔记系列01 要学一门编程语言,首先需要将语言的环境配置好.如果想要个直接上手的环境,感谢日本的大神 Shirakumo,打造了一个 Common Lisp 的 IDE - ...
-
WAMP环境配置-Apache服务器的安装
一.下载 下载地址:http://httpd.apache.org/ 在这里就可以下载想下载的版本了 二.安装 我这次环境配置安装的是Apache-2.4.23版本! (最近我在反复安装PHP的时候出 ...
-
idea npm vue java开发工具安装 环境配置
感谢此链接内容作者,从前往后流程较完整详细,助我成功配置好(不知道在这之前做的一些尝试有没有影响) https://blog.csdn.net/qq_42564846/article/details/ ...
-
一文搞定Spring Boot + Vue 项目在Linux Mysql环境的部署(强烈建议收藏)
本文介绍Spring Boot.Vue .Vue Element编写的项目,在Linux下的部署,系统采用Mysql数据库.按照本文进行项目部署,不迷路. 1. 前言 典型的软件开发,经过" ...
-
Hybrid app(cordova) 环境配置记录
node版本管理 NVM 安装过程 由于最新版 node 不兼容部分功能,所以需要安装 nvm 切换 node 版本 在 https://github.com/coreybutler/nvm-wind ...
随机推荐
-
Snowflake 全局唯一Id 生成
/// <summary> /// From: https://github.com/twitter/snowflake /// An object that generates IDs. ...
-
Python3.4如何读写Excel
在python3.x(散仙使用的版本是python3.4)里,我们应该如何操作excel. 首先在python3.4里,我们可以使用新的python类库,来支持3.x之后的读写excel 针对 03版 ...
-
iOS开发之图片分辨率与像素对齐
像素对齐的概念 在iOS中,有一个概念叫做像素对齐,如果像素不对齐,那么在GPU渲染时,需要进行插值计算,这个插值计算的过程会有性能损耗. 在模拟器上,有一个选项可以把像素不对齐的部分显示出来.  ...
-
luigi学习-luigi的配置文件
一.luigi配置文件的加载顺序 /etc/luigi/client.cfg luigi.cfg LUIGI_CONFIG_PATH环境变量 二.配置文件分节 配置文件被分为了多个section,每一 ...
-
Python: Pandas运算的效率探讨以及如何选择高效的运算方式
本文就Pandas的运行效率作一个对比的测试,来探讨用哪些方式,会使得运行效率较好. 测试环境如下: windows 7, 64位 python 3.5 pandas 0.19.2 numpy 1.1 ...
-
面向对象编程技术的总结和理解(c++)
目录树 1.继承 1.1 基类成员在派生类中的访问属性 1.2继承时导致的二义性 1.3 多基继承 2.虚函数的多态 2.1虚函数的定义 2.2派生类中可以根据需要对虚函数进行重定义 2.3 虚函数的 ...
-
JavaScript绝句的小研究
前几日在网上看到一篇文章:JavaScript绝句,看了以后觉得里面的代码颇为有趣,不过文章里面只是简单的说了这样写的目的和结果,却没有令读者起到既知其然,又知其所以然的效果.这里简单写一篇小文章剖析 ...
-
全球变暖|2018年蓝桥杯B组题解析第九题-fishers
标题:全球变暖 你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: ....... .##.... .##.... ....##. .. ...
-
go语言基础之切片做函数参数
1.切片做函数参数 (备注:用了冒泡排序) 示例: package main //必须有个main包 import "fmt" import "math/rand&quo ...
-
Python并发编程实例教程
有关Python中的并发编程实例,主要是对Threading模块的应用,文中自定义了一个Threading类库. 一.简介 我们将一个正在运行的程序称为进程.每个进程都有它自己的系统状态,包含内存状态 ...