vue-cli 3 配置打包环境
从新建项目到设置打包环境
1.vue create vue-cli-env 创建应用publicPath
2.新建 vue.config.js 文件(vue cli 3 配置文件),设置
module.exports = {
publicPath: './'
}
3.新建各个环境的文件,例如:.env.development .env.test .env.production
4.在 package.json 文件中设置打包命令 --mode test 指的是当前选择环境 test,即 .env.test 文件所代表环境
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
},
关于环境变量的注意事项(.env.xx 文件)
* 环境名应该与环境文件统一
* 环境文件放置项目根目录下
* 除了 baseUrl 和 NODE_ENV 其他环境变量使用 VUE_APP 开头
gitlab地址:https://github.com/lankongmoxing/vue-cli-3.0.3-build-env
vue-cli 3 配置打包环境的更多相关文章
- vue cli2.x配置多环境打包
一.安装 npm install --save-dev cross-env 二.配置步骤 1.修改config下的文件 //test.env.js 'use strict' module.export ...
- @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap
vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...
- [Vue CLI 3] 配置解析之 parallel
官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...
- [Vue CLI 3] 配置解析之 indexPath
在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...
- ionic 配置打包环境
配置java环境就不说了,太简单 下载AndroidSdkAndroid SDK Tools翻过墙的朋友可以去Google Android的官网上下载:http://developer.android ...
- Vue CLI 3 配置兼容IE10
最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...
- [Vue CLI 3] 配置 webpack-bundle-analyzer 插件
首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...
- [Vue CLI 3] 配置解析之 css.extract
大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...
- vue config.js配置生产环境和发布环境不同的接口地址问题
第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...
随机推荐
- Pthon的定时任务APScheduler的启动与关闭
Pthon的定时任务APScheduler的启动与关闭 安装: sudo pip install apscheduler 使用: 直接运行Python文件即可,如 python XXX.py,XXX. ...
- Xcode升级插件失效解决办法-升级版
Xcode升级插件失效解决办法 每每升级Xcode,第三方插件总是中枪.解决办法也基本是依据http://joeshang.github.io/2015/04/10/fix-xcode-upgrade ...
- 2016/2/26 <marquee></marquee>实现多种滚动效果
页面的自动滚动效果,可由javascript来实现,但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记 ...
- frameset使用总结
frameset使用总结 2009-06-15 00:59 213人阅读 评论(0) 收藏 举报 框架bordermicrosoftinternethtml文档 FRAMESET 元素是 FRAME ...
- AutoIT: 开发界面结合GUI automation和Watir Automation
可以应用AutoIT开发出界面,从而把AutoIT对GUI的自动化测试与Watir对web的自动化测结合在一起.以下代码是我学习GUI界面开发的实例代码.1. 当点击Watir_Test_Button ...
- h5 页面设计尺寸
请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta content ...
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频
通过 asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)介绍,可以上传图片到服务器了,也可以上传小的视频文件,并且由百度编辑器自动加入html5<video>标签播放 ...
- 关于netty的简单实现
1. 新建两个maven项目, 分别为 netty-server: netty的服务端: 消息的消费者 netty-client: netty的客户端: 消息的生产者 2. 分别引入netty的mav ...
- bzoj 1923: [Sdoi2010]外星千足虫【高斯消元】
裸的异或高斯消元 #include<iostream> #include<cstdio> using namespace std; const int N=2005; int ...
- luogu P1309 瑞士轮【排序】
题目背景 在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较低,但比赛过程往往十分 ...