转载请标明出处:

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. 为什么unsigned (-1)表示无符号整数的最大值

    整数在计算机中的表示 在计算机中,整数采用补码表示.当前主流编译器中整型在内存中占用四个字节,共32位. 机器数:一个数在计算机中的二进制表示形式, 叫做这个数的机器数.机器数是带符号的,在计算机用一 ...

  2. Linux下SVN库迁移

    在日常的工作中,可能因为一些服务器硬件损坏等问题,不得不把SVN服务器上的SVN版本库进行迁移,下面讲解一下SVN库迁移方案(采用dump & load方案),在实际操作的时候也非常的简单,有 ...

  3. Opengl_入门学习分享和记录_番外篇01(MacOS上如何在Xcode 开始编辑OpenGL)

    写在前面的废话: 哈哈 ,我可真是勤勉呢,今天又来更新了,这篇文章需要大家接着昨天的番外篇00一起食用! 正文开始: 话不多说,先看代码. 这里主要全是使用的glfwwindowhint 这个函数,他 ...

  4. 免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作简易流量爬虫

    前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...

  5. c语言ld returned 1 exit status😂

    在复习c语言过程中遇到, 问题:reverseLinkedList.exe: Permission denied collect2.exe: error: ld returned 1 exit sta ...

  6. JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)

    首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...

  7. EFCore + MySql codeFirst 迁移 Migration出现的问题

    第二次使用Migration update-database的时候出现以下错误: System.NotImplementedException: The method or operation is ...

  8. 存在于文件名中的SQL手工注入

    SQL注入已经在前一章为大家介绍了个大概,本文将讲述我遇到的本以为是文件上传漏洞,却是以文件名触发的SQL注入! 本文分享的内容同样来自于一道CTF题! 1. 直接进入正题 (1) 初步探测 先看一下 ...

  9. Go最火的Gin框架简单入门

    Gin 介绍 Gin 是一个 Golang 写的 web 框架,具有高性能的优点,,基于 httprouter,它提供了类似martini但更好性能(路由性能约快40倍)的API服务.官方地址:htt ...

  10. python学习之路(3)---列表

    列表定义: 列表就是一个数据的集合,列表是可以重复的,可以对存储的数据进行增删改查, 列表的写法: list_name = ['ljwang','wangwu'] 列表的嵌套 a = ['1',['2 ...