从新建项目到设置打包环境

1.vue create vue-cli-env 创建应用
2.新建 vue.config.js 文件(vue cli 3 配置文件),设置
publicPath
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 配置打包环境的更多相关文章

  1. vue cli2.x配置多环境打包

    一.安装 npm install --save-dev cross-env 二.配置步骤 1.修改config下的文件 //test.env.js 'use strict' module.export ...

  2. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  3. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  4. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  5. ionic 配置打包环境

    配置java环境就不说了,太简单 下载AndroidSdkAndroid SDK Tools翻过墙的朋友可以去Google Android的官网上下载:http://developer.android ...

  6. Vue CLI 3 配置兼容IE10

    最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...

  7. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  8. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  9. vue config.js配置生产环境和发布环境不同的接口地址问题

    第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文 ...

随机推荐

  1. 【iOS系列】-使用CAGradientLayer设置渐变色

    有时候iOS开发中需要使用到渐变色,来给图片或者view盖上一层,使其显示效果更好,我们这里使用的CAGradientLayer来设置渐变色 要实现的效果如下: Demo地址---下载 // 创建渐变 ...

  2. 【iOS系列】-UINavigationController的使用(Segue传递数据)

    [iOS系列]-UINavigationController的使用 UINavigationController是以以栈(先进后出)的形式保存子控制器, 常用属性: UINavigationItem有 ...

  3. Hibernate 之 HQL

    通过对Hibernate框架的学习,已经慢慢的对Hibernate有了进一步的了解,接下来我们要说的是HibernateQusery Language(HQL),如果你正在学习SSH框架,那SQL对你 ...

  4. test_action

    [TOP] 为什么百度校招数据挖掘工程师的笔试题目是跟数据挖掘关系不大? - 研究生生活交流 - 王道论坛,专注于计算机考研的点点滴滴! http://www.cskaoyan.com/thread- ...

  5. android stdio 异常

    1.android studio gradle project sync failed File -> Settings 搜索Gradle 2.eqmu-system-i386未响应   分辨率 ...

  6. Android 6.0 RK3288 ROM编译详解+命令详解【转】

    本文转载自:http://blog.csdn.net/MLQ8087/article/details/58607692 Android 6.0 RK3288 ROM编译详解+命令详解 原创 2017年 ...

  7. Ubuntu系统下实现Android工程调用独立编译的C++程序和GMP、PBC库

    目的: 实现使用C++编写代码供Android工程调用.C++代码中可以使用STL库,也可以使用常用的由源码编译生成的库,如PBC.因为PBC是基于GMP库的,所以这里只记录了GMP和PBC库的编译安 ...

  8. APP界面常用的五种颜色搭配

    众所周知,每一种颜色带给用户的视觉感受也是不同的.现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计.移动端UI界 ...

  9. jfreechart应用2--柱状图(作者:百度 被风吹过的日子)

    jfreechart应用2--柱状图 二.   柱状图 在WebRoot目录下建立bar目录,用来存放柱状图的各个例子.首先在该目录下建立一个sample1.jsp文件,让我们来看一个简单的柱状图的例 ...

  10. POJ - 3308 Paratroopers(最大流)

    1.这道题学了个单词,product 还有 乘积 的意思.. 题意就是在一个 m*n的矩阵中,放入L个敌军的伞兵,而我军要在伞兵落地的瞬间将其消灭.现在我军用一种激光枪组建一个防御系统,这种枪可以安装 ...