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

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. ImageLoader实现图片异步载入

    ImageLoader是一个广泛使用的图片库,在向网络请求图片时.使用imageView和smartView常会产生outofmemory错误,这时ImageLoader能够起到非常大的作用.主要有例 ...

  2. eclipse下对中文乱码问题的一些思考

    一.浏览器问题 当你的html页面或jsp页面没有显式声明页面编码的时候,也就是没有下面其中之一的代码 <meta http-equiv="content-type" con ...

  3. iOS 浅谈MVC设计模式及Controllers之间的传值方式

    1.简述你对MVC的理解? MVC是一种架构设计.它考虑了三种对象:Model(模型对象).View(试图对象).Controller(试图控制器) (1)模型:负责存储.定义.操作数据 (2)视图: ...

  4. 2016/3/27 PHP中include和require的区别详解

    1.概要 require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说, ...

  5. 内存充足,但是为什么hadoop3无法启动nodemanager

    [root@hadoop3 hadoop]# xloStarting namenodes on [hadoop3]上一次登录:三 12月 27 16:06:01 CST 2017pts/24 上Sta ...

  6. 实践001:char 类型字段在表中的长度

    Rainy on 20170215 1.同事在 写RFC的时候遇到报错:"YTST_001" 必须为扁平结构.不能将内部表.字符# 原因是自建结构中字段定义为了string 类型. ...

  7. beego07----web博客

    conf/app.conf appname = blog1 httpport = 8080 runmode = dev name=admin pwd=admin controllersmy/attac ...

  8. touch all contents in a folder recursively

    https://superuser.com/questions/598163/powershell-touch-all-files-newer-than Powershell to use Unix ...

  9. java虚拟机内存区域理解

    java虚拟机有的区域随着虚拟机进程的启动而存在, 有的区域依赖用户线程的启动和结束而建立和销毁. 程序计数器:为了线程切换后能恢复到正确的执行位置,每个线程都有一个独立的程序计数器.(针对java方 ...

  10. jsp 中href链接有前缀

    在jsp页面中,如果有一个链接写为:“href="www.hqvolunteer.org"”(链接到的是外网),这样发布项目了后,把鼠标移到上面显示的是:你的项目路径/www.hq ...