vue cli 4 多环境_Vue 前端uni-app多环境配置部署服务器的问题
转载请标明出处:
https://dujinyang.blog.csdn.net/article/details/100831712/
本文出自:【奥特曼超人的博客】
前端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
vue cli 4 多环境_Vue 前端uni-app多环境配置部署服务器的问题相关推荐
- Vue 前端uni-app多环境配置部署服务器的问题
转载请标明出处: http://dujinyang.blog.csdn.net/ 本文出自:[奥特曼超人的博客] Vue uni如何部署到服务器,并区分部署环境 前端Vue 针对问题 package. ...
- vue面试有哪些插件_vue 前端框架面试问题汇总
1 active-class是哪个组件属性.嵌套路由怎么定义? 解.vue-router 模块的router-link 组件 2 怎么定义vue-router动态路由?怎么获取传过来的动态参数? 解. ...
- vue添加html开启服务器_Vue 项目(HTML5 History 模式) 部署服务器
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题 ...
- vue导入excel进度条_Vue 前端开发——导入Excel/Csv
项目开发中遇到导入表格常见的就是excel和csv 格式,一般情况下我们会前端首先得到这个表格里面的数据,然后再把数据发送给后端,也有的是直接上传文件传给后台后台自己处理,这样就不好控制上传前预览和处 ...
- vue工程加入Java代码_vue 前端项目创建
一.创建项目 将vue-admin-template-master 模板放入创建的 VS code 的工作空间.重命名为自己的项目. 模块获取方法:关注"Java程序员进阶",回复 ...
- vue保存页面的值_vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- vue 获取安卓原生方法_vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下.1.通过url传输数据:(一般是在入口页面传下app ...
- vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
最新文章
- rtmp 封包及消息
- jsp项目放入宝塔windows环境_《鸡站群组》-教你建站(1.1) 下载并配置windows宝塔面板...
- [caffe(一)]使用caffe训练mnist数据集
- jQuery操作cookie
- 微软ping程序源代码完整版(附详细的注释)
- 完整的可按年份和月份查询数据并显示
- 接口请求json解析问题
- EIGRP分解试验部分-LAB1:EIGRP基本试验
- uboot驱动模型(DM)分析(一)
- PHP8.0环境详细安装教程
- 10的负2次方用计算机怎么算,2的负二次方等于多少(进制转换计算器)
- CVPR'22 | 基于像素差异学习的视频高光检测算法及在视频广告中的应用
- An工具介绍之3D工具
- 谷歌io开发者大会2018:强大的AI帝国
- ACM如何入门,ACM竞赛需要学习哪些算法?
- 8. G1垃圾收集日志
- 手机贴图压缩技术标准及作用
- 文献阅读(77)稀疏跳零结构(1)
- 用Java 开发 WebService Axis简单实例
- python实现人民币金额大写转小写数字