• vue管理系统从0到1-环境与模式
  • Artiely
  • #vue
  • 2020-06-05
  • 544
  • 3 min read
  • loading...

vue 管理系统从 0 到 1-环境与模式

文档

为什么需要模式和环境

我们平时在开发的过程中会有很多的环境和模式:比如我们我们npm run dev这就是一个开发环境,npm run build 打包就是一个生产环境。但是这远远是不够的。

很多时候我们需要将打包好的资源发布各个环境下,可能每个环境都对应不同的 api 地址和服务器地址。我们不可能每次打包的时候都去手动的更改地址,然后再打包,繁琐倒不说,关键是容易出错。所以需要环境和模式的配合。

具体的操作

    $ tp -i node_modules .history .git
    ├──public
    │ ├──static
    │ ├──favicon.ico
    │ └──index.html
    ├──src
    │ ├──api
    │ ├──assets
    │ │ ├──fonts
    │ │ │ └──DINPro-Medium.ttf
    │ │ ├──img
    │ │ ├──style
    │ │ │ ├──cover.less
    │ │ │ ├──index.less
    │ │ │ ├──layout.less
    │ │ │ ├──main.less
    │ │ │ └──var.less
    │ │ └──logo.png
    │ ├──common
    │ │ ├──directive
    │ │ ├──filters
    │ │ ├──utils
    │ │ │ ├──modules
    │ │ │ │ ├──env.js
    │ │ │ │ └──time-range.js
    │ │ │ └──index.js
    │ ├──components
    │ │ ├──HelloWorld.vue
    │ │ └──index.js
    │ ├──config
    │ ├──layout
    │ ├──packages
    │ │ └──index.js
    │ ├──router
    │ │ └──index.js
    │ ├──store
    │ │ └──index.js
    │ ├──views
    │ │ ├──About.vue
    │ │ └──Home.vue
    │ ├──App.vue
    │ ├──main.js
    │ └──vue.config.js
    ├──.browserslistrc
+   ├──.env
+   ├──.env.dev
+   ├──.env.test
+   ├──.env.release
+   ├──.env.stage
    ├──.eslintrc.js
    ├──.gitignore
    ├──babel.config.js
    ├──package-lock.json
    ├──package.json
    └──README.md
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

我们新增了五个文件这五个文件的类容分别是

# .env
# 全局的环境变量,全局生效
复制成功
1
2
# .env.dev
VUE_APP_MODE = development
VUE_APP_MODE = dev
# 测试模式下开发环境
复制成功
1
2
3
4
# .env.test
VUE_APP_MODE = production
VUE_APP_MODE = test
# 测试模式下生产环境
复制成功
1
2
3
4
# .env.release
VUE_APP_MODE = production
VUE_APP_MODE = release
# 生产模式下的生产环境
复制成功
1
2
3
4
# .env.stage
VUE_APP_MODE = production
VUE_APP_MODE = stage
# 预发布模式下的生产环境
复制成功
1
2
3
4

具体的使用

通过模式配置全局路径变量

我们可以再全局的 config 配置如下代码(伪代码)

// 获取环境变量
// 定义不同模式下路劲不同的变量
// 如支付路径 api路径 oss的路径
let payUrl, baseURL, aliOssTokenUrl, aliOssPostUrl

// 0 国内 1国外 oss还分国内和国外测试和正式
const testOss = [
  'https://timing-test.oss-cn-hangzhou.aliyuncs.com',
  'https://timing.oss-accelerate.aliyuncs.com',
]
const releaseOss = [
  'https://timing.oss-cn-hangzhou.aliyuncs.com',
  'https://timing.oss-accelerate.aliyuncs.com',
]

const testTokenOss = '//118.31.222.92/pan-upload/get-policy'
const grayTokenOss = '//101.37.27.140:8083/pan-upload/get-policy'
const releaseTokenOss = 'https://api.timing360.com/pan-upload/get-policy'
const testPayUrl = '//118.31.222.92:8083'
// 浏览器下载地址
const chromeDownUrl =
  'http://activity.timing360.com/browserDownload/ChromeSetup.exe'

if (process.env.VUE_APP_MODE === 'development') {
  // 开发
  payUrl = testPayUrl
  baseURL = ''
  aliOssTokenUrl = testTokenOss
  aliOssPostUrl = testOss
} else if (process.env.VUE_APP_MODE === 'test') {
  // 测试环境
  payUrl = testPayUrl
  baseURL = ''
  aliOssTokenUrl = testTokenOss
  aliOssPostUrl = testOss
} else if (process.env.VUE_APP_MODE === 'stage') {
  // 灰度环境
  payUrl = '//101.37.27.140:12800'
  baseURL = '//101.37.27.140:12800'
  aliOssTokenUrl = grayTokenOss
  aliOssPostUrl = releaseOss
} else if (process.env.VUE_APP_MODE === 'release') {
  // 正式环境
  payUrl = 'https://www.timing360.com'
  baseURL = 'https://sp.timing360.com'
  aliOssTokenUrl = releaseTokenOss
  aliOssPostUrl = releaseOss
}
// obs的下载地址和使用教程
const macOBSUrl = 'http://activity.timing360.com/ObsDownload/obs.dmg'
const WindowsOBSUrl = 'http://activity.timing360.com/ObsDownload/obs.exe'
const WindowsOBSUrlx32 = 'http://activity.timing360.com/ObsDownload/obsx86.exe'
const InstructionsForOBSVideoUrl =
  'https://activity.timing360.com/onlineImage/obsLive.mp4'

export {
  payUrl,
  baseURL,
  aliOssTokenUrl,
  aliOssPostUrl,
  chromeDownUrl,
  macOBSUrl,
  WindowsOBSUrl,
  WindowsOBSUrlx32,
  InstructionsForOBSVideoUrl,
}
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

这样在使用的时候直接引入对应的变量即可

通过模式打包项目

配置 vue.config.js

let outputDir, assetsDir
if (process.env.VUE_APP_MODE === 'test') {
  outputDir = 'dist/test'
  assetsDir = './static'
} else if (process.env.VUE_APP_MODE === 'stage') {
  outputDir = 'dist/gray'
  assetsDir = './static'
} else if (process.env.VUE_APP_MODE === 'release') {
  outputDir = 'dist/release'
  assetsDir = './static'
}
module.exports = {
  outputDir: outputDir,
  assetsDir: assetsDir,
  // ...
}
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

配合修改 package.json

  "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
+     "build:test": "vue-cli-service build --mode test",
+     "build:stage": "vue-cli-service build --mode stage",
+     "build:release": "vue-cli-service build --mode release",
+     "build:all": "npm run build:test && npm run build:stage && npm run build:release",
      "preview": "node build/index.js --preview",
      "lint": "eslint --fix --ext .js,.vue src",
      "test:unit": "jest --clearCache && vue-cli-service test:unit",
      "test:ci": "npm run lint && npm run test:unit",
      "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
    },
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13

这样只要执行对应的命令就会生成对应的资源到对应的目录下,再也不用手动更改地址再打包了。

npm run build:all 一行命令打包3个模式的资源

第五步!