Vue+TypeScript+ElementUI 实战 （四）全局设置

1、多环境配置

多环境变量是在项目开发·打包·生产时产生的概念，所谓的多环境变量指的就是一个项目适配多种环境。

• 开发环境：一般是本地开发时所使用的环境，改动很频繁
• 测试环境：较为稳定的版本，一般用于部署测试
• 生产环境：发布到线上的版本

1.1 配置启动命令

配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等

在package.json文件中这样设置：

"scripts": {
    "serve": "vue-cli-service serve",   //开发环境
    "serve:test": "vue-cli-service serve --mode test", //测试环境
    "build:test": "vue-cli-service build --mode test",
    "build:production": "vue-cli-service build --mode production", //生产环境
  }, 

1.2 在根目录创建.env文件

注意：.env文件是环境配置，不允许胡乱命名

.env.development

# 开发环境
NODE_ENV=development
VUE_APP_ENV=development

# 开发环境，接口地址
VUE_APP_BASE_URL = 

.env.production

# 生产环境
ODE_ENV=production
VUE_APP_ENV=production

# 生产环境，接口地址
VUE_APP_BASE_URL = 

.env.test

# 测试环境
NODE_ENV =test
VUE_APP_ENV =test

# 测试环境，接口地址
VUE_APP_BASE_URL = 

要点

• .env文件中的默认属性有 NODE_ENV和 BASE_URL
• 添加的属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX
• 可以通过 process.env 在任何地方访问到当前环境配置属性

1.3 获取属性

// process.env 会根据当前的环境，加载对应的环境变量文件中的变量
console.log(process.env.VUE_APP_BASE_URL)
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL 

2、SCSS配置

2.1 样式初始化

作用： 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

安装

yarn add normalize.css 

使用 main.js 导入 normalize.css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

+ import 'normalize.css' //直接导入

createApp(App).use(store).use(router).mount('#app') 

推荐直接下载 normalize.css，然后在main.js引入

2.2 使用Element UI

添加依赖

yarn add element-ui 

在项目中改变 SCSS 变量

Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS࿰