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

时间:2021-08-31 06:38:49

转载请标明出处:

http://dujinyang.blog.csdn.net/

本文出自:【奥特曼超人的博客】

@

前端Vue

Vue 经过这一年的进化,模版也是相当丰富了,但在使用多界面时,个人感觉还是有点弊端,CSS的样式问题。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

针对问题

多环境部署会引发很多问题,当然,是开发环境下了,这次博主我也引发了这个小问题,从而看到很多人对部署的环境会有疑问,毕竟Vue没有暴漏出像JAVA那样的可配置环境。

SyntaxError: Unexpected token p in JSON
  • 需要区分 开发、QA、预发布、生产等多个环境,如何满足?
  • 怎么部署到服务器上自动判断呢?

对Uni-app 的使用也是这段时间好奇才去看了看,当然,并不是去看使用,而是好奇整个架构模版的生成,还是使用HBUILDER去开发,所以我们得注意两件事情:

  1. Vue 只关注视图层 , 采用自底向上增量开发的设计。
  2. Vue API 实现了数据绑定和视图组件,所以,很多人用 npm install 后都会出现package的系列问题

package.json描述

不管你安装说明组件或模版,总是会看到目录下 package.json ,那这个文件是做什么用的呢?其实这个文件相当于 config ,所以你得注意 distlib

多环境部署

很多人想要像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多环境配置部署服务器的问题的更多相关文章

  1. 前端移动App开发环境搭建

    移动App开发环境安装 一.环境安装准备软件 二.node的安装 像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init .npm install -g ...

  2. APP自动化环境配置

    做自动化很多人都不喜欢做app自动化,说实话,我也不喜欢做app自动化,但是没办法,老板给你钱,让你做,不得不做! 其实app自动化的难点就在于环境,环境OK了之后一切都和web自动化差不多,顶多就是 ...

  3. app自动化测试环境配置:adb环境配置、monkey环境配置、appium环境配置大全

    1. 安装jdk 2. 安装配置Andriod sdk 安装Andriod sdk前首先需要安装配置好jdk环境. 然后安装Android sdk 安装完成后需要配置环境变量:ANDROID_HOME ...

  4. Tomcat环境配置部署测试环境及架构

    Tomcat环境配置已经在前面介绍过了,这边就为童鞋们介绍下对于Tomcat的架构是怎么样的! Tomcat的架构包含(bin.conf.lib.logs.temp.wenapps.work)等文件夹 ...

  5. Lisp-01: 相关开发环境配置部署

    Common Lisp 学习笔记系列01 要学一门编程语言,首先需要将语言的环境配置好.如果想要个直接上手的环境,感谢日本的大神 Shirakumo,打造了一个 Common Lisp 的 IDE - ...

  6. WAMP环境配置-Apache服务器的安装

    一.下载 下载地址:http://httpd.apache.org/ 在这里就可以下载想下载的版本了 二.安装 我这次环境配置安装的是Apache-2.4.23版本! (最近我在反复安装PHP的时候出 ...

  7. idea npm vue java开发工具安装 环境配置

    感谢此链接内容作者,从前往后流程较完整详细,助我成功配置好(不知道在这之前做的一些尝试有没有影响) https://blog.csdn.net/qq_42564846/article/details/ ...

  8. 一文搞定Spring Boot + Vue 项目在Linux Mysql环境的部署(强烈建议收藏)

    本文介绍Spring Boot.Vue .Vue Element编写的项目,在Linux下的部署,系统采用Mysql数据库.按照本文进行项目部署,不迷路. 1. 前言 典型的软件开发,经过" ...

  9. Hybrid app(cordova) 环境配置记录

    node版本管理 NVM 安装过程 由于最新版 node 不兼容部分功能,所以需要安装 nvm 切换 node 版本 在 https://github.com/coreybutler/nvm-wind ...

随机推荐

  1. Snowflake 全局唯一Id 生成

    /// <summary> /// From: https://github.com/twitter/snowflake /// An object that generates IDs. ...

  2. Python3&period;4如何读写Excel

    在python3.x(散仙使用的版本是python3.4)里,我们应该如何操作excel. 首先在python3.4里,我们可以使用新的python类库,来支持3.x之后的读写excel 针对 03版 ...

  3. iOS开发之图片分辨率与像素对齐

    像素对齐的概念 在iOS中,有一个概念叫做像素对齐,如果像素不对齐,那么在GPU渲染时,需要进行插值计算,这个插值计算的过程会有性能损耗. 在模拟器上,有一个选项可以把像素不对齐的部分显示出来.  ...

  4. luigi学习-luigi的配置文件

    一.luigi配置文件的加载顺序 /etc/luigi/client.cfg luigi.cfg LUIGI_CONFIG_PATH环境变量 二.配置文件分节 配置文件被分为了多个section,每一 ...

  5. Python&colon; Pandas运算的效率探讨以及如何选择高效的运算方式

    本文就Pandas的运行效率作一个对比的测试,来探讨用哪些方式,会使得运行效率较好. 测试环境如下: windows 7, 64位 python 3.5 pandas 0.19.2 numpy 1.1 ...

  6. 面向对象编程技术的总结和理解(c&plus;&plus;)

    目录树 1.继承 1.1 基类成员在派生类中的访问属性 1.2继承时导致的二义性 1.3 多基继承 2.虚函数的多态 2.1虚函数的定义 2.2派生类中可以根据需要对虚函数进行重定义 2.3 虚函数的 ...

  7. JavaScript绝句的小研究

    前几日在网上看到一篇文章:JavaScript绝句,看了以后觉得里面的代码颇为有趣,不过文章里面只是简单的说了这样写的目的和结果,却没有令读者起到既知其然,又知其所以然的效果.这里简单写一篇小文章剖析 ...

  8. 全球变暖&vert;2018年蓝桥杯B组题解析第九题-fishers

    标题:全球变暖 你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: ....... .##.... .##.... ....##. .. ...

  9. go语言基础之切片做函数参数

    1.切片做函数参数 (备注:用了冒泡排序) 示例: package main //必须有个main包 import "fmt" import "math/rand&quo ...

  10. Python并发编程实例教程

    有关Python中的并发编程实例,主要是对Threading模块的应用,文中自定义了一个Threading类库. 一.简介 我们将一个正在运行的程序称为进程.每个进程都有它自己的系统状态,包含内存状态 ...