一、configureWebpack和chainWebpack
1.都是对webpack进行配置，但是配置的方式不一样
2.configurewebpack是对象,链式编程，适用于简单的Webpack配置修改
chainwebpack是函数，这个函数的参数就是webpack-chain的实例对象，通过这个实例对象来改，适用于复杂的Webpack配置扩展和修改
具体见：www.jianshu.com/p/8cbb8560d…
二、vue-cli-service serve的原理 vue-cli-service serve 是 Vue CLI 提供的一个命令行工具，用于在开发环境中启动一个本地的开发服务器。它的原理如下：
首先，vue-cli-service serve 会读取项目根目录下的 vue.config.js 文件，该文件包含了一些配置选项，如代理、自定义端口等。这些配置选项将影响开发服务器的行为。
接下来，vue-cli-service serve 会使用 webpack 构建工具根据项目中的配置(devServer)和代码来创建一个开发服务器。
开发服务器会监听指定的端口（默认为 8080），并提供一个 HTTP 服务。
当你在浏览器中访问开发服务器的地址时，服务器会根据请求的路径来返回相应的内容。
开发服务器支持热模块替换（HMR），这意味着当你修改了代码后，浏览器会自动刷新，并且保持当前页面的状态（如滚动位置、表单数据等）。
总结起来，vue-cli-service serve 的原理就是通过 webpack 构建工具创建一个开发服务器，用于在开发阶段快速预览和调试 Vue 项目。它提供了自动编译、热重载和代理等功能，以提高开发效率。
三、vue-cli-service build的原理 使用 vue-cli-service build 命令会触发 Vue CLI 内置的 webpack 构建过程，将 Vue 项目打包成用于生产环境部署的静态文件。以下是 vue-cli-service build 的原理：
1.读取配置：当运行 vue-cli-service build 命令时，Vue CLI 会首先读取项目根目录下的 vue.config.js 文件，该文件中包含了一些构建相关的配置选项，如输出路径、是否生成 source map、是否开启 gzip 等。
2.创建 webpack 配置：根据项目中的配置和代码，Vue CLI 会使用 webpack 构建工具创建一个用于生产环境的 webpack 配置。这个配置会包括一系列的 loader、插件以及优化策略，用于将 Vue 项目的源代码转换、压缩、优化，并最终输出静态文件。
3.执行构建过程：接下来，Vue CLI 将使用上述配置启动 webpack 构建过程。在构建过程中，webpack 会根据配置逐步处理项目中的各个模块，包括解析、转译、压缩、代码分割等操作。同时，还会执行一些额外的优化策略，如启用 tree shaking 来消除未使用的代码、生成 sourcemap 以方便调试、对文件进行哈希命名以实现缓存控制等。
4.输出静态文件：最后，webpack 将根据配置将构建生成的静态文件输出到指定的目录中。这些文件包括 HTML、CSS、JavaScript 以及其他静态资源，它们经过压缩、优化后可以直接用于部署到生产环境的服务器上。
总结起来，vue-cli-service build 的原理就是通过 webpack 构建工具创建一个用于生产环境的 webpack 配置，并执行构建过程将 Vue 项目打包成静态文件。这个过程涉及到代码转换、优化和输出等多个环节，最终生成适合部署的静态文件。
四、vue-cli2多环境配置
在 Vue CLI 2 中，你可以通过配置不同的环境变量来实现多环境的配置。Vue CLI 2 内置了三个环境：development（开发环境）、testing（测试环境）和 production（生产环境）。下面是具体的配置步骤：
在项目根目录下创建 .env 文件，该文件用于定义全局环境变量。例如，你可以将以下变量定义在 .env 文件中：
# .env
VUE_APP_API_BASE_URL=http://localhost:3000/api
其中，VUE_APP_API_BASE_URL 是一个用于指定 API 的环境变量，值为 http://localhost:3000/api，这里假设你的后端服务器在本地的 3000 端口上运行。
创建其他环境的环境变量文件。这些文件以 .env.[环境名] 的形式命名，例如 .env.production、.env.staging 等。这些文件中的变量会覆盖 .env 文件中的同名变量。例如，你可以在 .env.production 文件中修改 VUE_APP_API_BASE_URL 的值：
# .env.production
VUE_APP_API_BASE_URL=https://api.example.com
在 config 目录下的 index.js 文件中配置不同环境的构建选项。例如，你可以在该文件中按以下方式导出一个对象：
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const stagingEnv = require('./staging.env')
const devEnv = require('./dev.env')
module.exports = {
// 开发环境下的配置
development: {
env: devEnv,
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/'
},
// 测试环境下的配置
testing: {
env: stagingEnv,
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map'
},
// 生产环境下的配置
production: {
env: prodEnv,
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: false,
devtool: '#source-map'
}
}
在这个例子中，我们定义了 development、testing 和 production 三个环境的构建选项。它们分别指定了不同的环境变量、输出路径、资源路径、是否生成 source map 等。
在 package.json 文件中添加脚本命令，用于启动不同环境的开发服务器或构建生产环境代码。例如：
{
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve --mode development",
"build:prod": "vue-cli-service build --mode production",
"build:staging": "vue-cli-service build --mode testing"
}
}
在这个例子中，我们添加了 dev、build:prod 和 build:staging 三个脚本命令，用于启动不同环境的开发服务器或构建生产环境代码。
至此，你就可以通过设置环境变量和修改构建选项来实现 Vue CLI 2 中的多环境配置了。请注意，在每次修改环境变量或构建选项后，你需要重新运行相应的命令才能使其生效。
五、vue-cli3多环境配置
在 Vue CLI 3 中，多环境配置的方式与 Vue CLI 2 有些不同，主要包括以下几个步骤：
在项目根目录下创建 .env.[环境名] 文件，例如 .env.development、.env.production 等。这些文件中可以定义环境变量，格式为 VUE_APP_XXX=xxx，其中 VUE_APP_ 是必须的前缀。例如，在 .env.development 文件中可以定义以下环境变量：
VUE_APP_BASE_API=http://localhost:3000/api
创建对应环境的构建配置文件。在项目根目录下创建 vue.config.[环境名].js 文件，例如 vue.config.production.js、vue.config.staging.js 等。这些文件中可以覆盖默认的构建配置，例如修改输出路径、资源路径、source map 等。例如，在 vue.config.production.js 文件中可以定义以下配置：
module.exports = {
publicPath: '/my-app/',
outputDir: 'dist/prod',
productionSourceMap: false
}
在 package.json 文件中添加脚本命令，用于启动不同环境的开发服务器或构建生产环境代码。例如：
"scripts": {
"serve": "vue-cli-service serve",
"build:prod": "vue-cli-service build --mode production",
"build:staging": "vue-cli-service build --mode staging"
}
在这个例子中，我们添加了 build:prod 和 build:staging 两个脚本命令，用于构建生产环境代码和测试环境代码。--mode 参数指定了使用哪个环境配置文件进行构建。
在代码中使用环境变量。在 Vue CLI 3 中，环境变量会被注入到 process.env 对象中，在代码中可以通过 process.env.VUE_APP_XXX 访问。例如，可以在代码中使用以下方式访问上面定义的环境变量：
const baseUrl = process.env.VUE_APP_BASE_API;
至此，你就可以通过设置环境变量和修改构建选项来实现 Vue CLI 3 中的多环境配置了。请注意，在每次修改环境变量或构建选项后，你需要重新运行相应的命令才能使其生效。
