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 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...
随机推荐
- react 中的 PureComponent
React.PureComponent最重要的一个用处就是优化React应用,因为它减少了应用中的渲染次数,所以对性能的提升是非常可观的. 原理:在普通的 componnet 组件中,shouldCo ...
- 【网站支付PHP篇】thinkPHP集成支付宝支付(担保交易)
目录 系列说明 开发环境 部署支付宝 支付请求 支付宝返回处理 系列说明 最近在帮朋友的系统安装支付模块(兑换网站积分),现在总结一些开发心得,希望对大家有用.这个系列会讲以下第三方支付平台的集成: ...
- hadoop第一个例子WordCount
hadoop查看自己空间 http://127.0.0.1:50070/dfshealth.jsp import java.io.IOException; import java.util.Strin ...
- cygwin安装sshd服务(win7)Error installing a service: OpenSCManager: Win32 error 5:
Error installing a service: OpenSCManager: Win32 error 5: 出现这个问题的解决办法:win7系统管理员运行Cygwin软件 ...
- Pulse-code modulation
脉冲编码调制(Pulse Code Modulation,PCM),由A.里弗斯于1937年提出的,这一概念为数字通信奠定了基础,60年代它开始应用于市内电话网以扩充容量,使已有音频电缆的大部分芯线的 ...
- (14)javaWeb中的HttpServletResponse类详解
如果希望了解请求和响应的详细内容,可以看我的“HTTP协议”系列文章 响应体的简单概述: a,响应报文结构: b,常见的状态码,返回服务器处理的结果: c,常见的响应头: HttpServletRes ...
- C#温度报警
using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...
- YTU 2800: 逗逗泡泡的保密电文
2800: 逗逗泡泡的保密电文 时间限制: 1 Sec 内存限制: 128 MB 提交: 229 解决: 114 题目描述 某电报局的电文保密的规律是将每个英文字母变成其后的第4个字母(很原始的那 ...
- math.floor()函数的用法
floor() 返回数字的下舍整数. 语法 以下是 floor() 方法的语法: import math math.floor( x ) 注意:floor()是不能直接访问的,需要导入 math 模块 ...
- E20170517-gg
jaw n. 下巴; 颌; indicator n. 指示器; gator n. 短吻鳄; median n. 中位数; 中线; [数] 中值;