vue2.0向vue3.0过度

https://vue-docs-next-zh-cn.netlify.app/guide/template-syntax.html#%E5%8E%9F%E5%A7%8B-html

重要  https://www.cnblogs.com/coober/p/10875647.html

填加iview按需引入   https://www.yuque.com/wangchengyi-p5qrg/kb/aks5sa

 重要重要 https://juejin.cn/post/6844904033782611976

封装axios衔接上面一条  https://www.cnblogs.com/panax/p/10942889.html

六、打包配置

在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段、预发布阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。作为一名开发人员，我们可能需要针对每一种环境编写一些不同的代码并且保证这些代码运行在正确的环境中，这就需要我们进行正确的环境配置和管理。

一般一个项目都会有以下 4 种环境：

• 开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）
• 测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）
• 预发布环境（即将上线阶段，上线前版本，预测线上出现问题的可能性，和上线版本无差别）
• 生产环境（上线阶段，正式对外发布的版本，一般会进行优化，关掉错误报告）

有关环境变量的注意事项：

• 环境文件放置根目录下
• 环境名应该与环境文件统一
• 除了 baseUrl 和 NODE_ENV 其他环境变量使用VUE_APP开头

在项目的根目录新建4个文件夹，分别对应开发环境（.env.dev），测试环境（.env.test），预发布环境（.env.pre），生产环境（env.prod）

​

.env.dev文件内容如下：

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地开发api地址'复制代码

.env.test文件内容如下：

NODE_ENV = 'test'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '测试环境api地址'复制代码

.env.pre文件内容如下：

NODE_ENV = 'pre-release'
VUE_APP_CURRENTMODE = 'pre'
VUE_APP_BASEURL = '预发布环境api地址'复制代码

env.prod文件内容如下：

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式环境api地址'复制代码

package.json配置：

    "scripts": {
        "dev": "vue-cli-service serve",
        "build:test": "vue-cli-service build --mode test",
        "build:per": "vue-cli-service build --mode pre-release",
        "build:prod": "vue-cli-service build --mode production",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },复制代码

最后根据上面的配置进行打包：

1. npm run dev //本地运行
2. npm run build:test //测试环境打包
3. npm run build:pre //预测试环境打包
4. npm run build:prod //正式环境打包

注意：

在vue.config.js使用 proccess.env.NODE_ENV 进行访问就可以了

// vue.config.js
console.log(process.env.NODE_ENV); // development（在终端输出）复制代码

当你运行 npm run dev命令后会发现输出的是 development，因为 vue-cli-service serve 命令默认设置的环境是 development，你可以修改 package.json 中的 dev 脚本的命令为：

"scripts": {
"dev": "vue-cli-service serve --mode test",
}
// --mode test其实就是修改了 webpack 4 中的 mode 配置项为 test，同时其会读取对应 .env.[model]文件下的配置 
// 如果没找到对应配置文件，其会使用默认环境 development
// 同样 vue-cli-service build 会使用默认环境 production

只要以 VUE_APP_ 开头的变量都会被 webpack.DefinePlugin 静态嵌入到客户端的包中。你可以在应用的代码中这样访问它们，例如我在@/api/index.js中初始化axios：

const $axios = axios.create({
  timeout: 30000,
  // 基础url，会在请求url中自动添加前置链接
  baseURL: process.env.VUE_APP_BASE_API
})