mydal

怕光阴流逝 让一切都作废

0%

vue-cli4 配置开发,测试,生产环境(打包上传到oss)

发表于 更新于 分类于
本文字数： 4.4k 阅读时长 ≈ 11 分钟

​ 在工作中,一般我们会有三个环境,开发,测试,生产。我们想要实现通过不同的命令，打包调用不同环境的API,来完成这三个环境的部署.

增加配置

我们在项目根目录新建env.dev,env.prod,env.test这三个文件.配置如下:

1
2
3
4
//env.dev
NODE_ENV = 'development'
VUE_APP_MODE = 'development'  //模式 
VUE_APP_BASEURL = 'http://192.168.xxx.xxx:8088' //本地开发服务器地址
1
2
3
4
//env.test
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_BASEURL = '//test-xxxxx.com' //测试环境服务器地址
1
2
3
4
//env.prod
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASEURL = '//xxx.xxxx.com'//生产环境服务器地址

修改package.json

1
2
3
4
5
6
7
8
//增加打包命令
"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "test": "vue-cli-service serve --mode test",
    "build:test": "vue-cli-service build --mode test", //测试 
    "build:prod": "vue-cli-service build --mode prod", //生产
    "lint": "vue-cli-service lint"
  },
1
2
3
4
5
6
7
8
#开发环境
yarn serve

#测试环境
yarn build:test 

#生产环境
yarn build:prod
1
2
#打印当前处于哪个环境
console.log(process.env)

打包生产环境上传到oss

安装webpack-aliyun-oss-plugin包

1
yarn add webpack-aliyun-oss-plugin --save-dev

修改vue.config

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
const WebpackAliyunOss = require("webpack-aliyun-oss"); // 引入webpack-aliyun-oss
const webpack = require('webpack')
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/train-backend': {
        target: process.env.VUE_APP_BASEURL,
        // 允许跨域
        changeOrigin: true,
      },

    },

  },
  publicPath:'https://xxxxx.xxx.com/xxx/www/xxx/' //服务器绝对路径
    configureWebpack: config => {
      if(process.env.VUE_APP_MODE === 'production'){ //当生产环境时进行上传
        let webpackAliyunOss = [
          new WebpackAliyunOss({
            from: ['./dist/**',], // 上传那个文件或文件夹  可以是字符串或数组 我这边默认dist全部上传
            dist: "/xxxx/www/xxxx/",  // 需要上传到oss上的给定文件目录
            region: 'oss-cn-beijing', // 区域 我这边是北京 视情况而定
            accessKeyId: '', //oss的keyid
            accessKeySecret: '',//oss的keysecret
            bucket: '',//bucket的名称 自己定
            overwrite: true,
            setOssPath: filePath => {
              // some operations to filePath
              let index = filePath.lastIndexOf("dist");
              let Path = filePath.substring(index + 4, filePath.length);
              return Path.replace(/\\/g, "/");
            },
            setHeaders: filePath => {
              return {
                "Cache-Control": "max-age=31536000"
              };
            }
          })
        ];
        config.plugins = [...config.plugins, ...webpackAliyunOss ];
      }

    }

};

想要每次推送到oss都覆盖原先的文件, 将WebpackAliyunOss的overwrite设置为true

1
2
3
4
5
6
7
8
9
10
11
12
13
this.config = Object.assign({
		test: false,				// 测试
		dist: '',					// oss目录
		buildRoot: '.',				// 构建目录名
		deleteOrigin: false,		// 是否删除源文件
		timeout: 30 * 1000,			// 超时时间
		parallel: 5,				// 并发数
		setOssPath: null,			// 手动设置每个文件的上传路径
		setHeaders: null,			// 设置头部
		overwrite: true,			// 覆盖oss同名文件
		bail: false,				// 出错中断上传
		logToLocal: false			// 出错信息写入本地文件
	}, options);

打包测试环境和生产环境到oss

对publicPath添加判断,代码如下：

1
publicPath: process.env.VUE_APP_MODE === 'production'? 'https://xxx.com/xxx/www/xxx/':(process.env.VUE_APP_MODE==='test'?'https://xxx.com/xxx/www-test/xxxx/':'./'),

再次修改vue.config

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
configureWebpack: config => {
      if(process.env.VUE_APP_MODE === 'production'){
        let webpackAliyunOss = [
          new WebpackAliyunOss({
            from: ['./dist/**',], // 上传那个文件或文件夹  可以是字符串或数组 我这边默认dist全部上传
            dist: "/xxxx/www/xxxx/",  // 需要上传到oss上的给定文件目录
            region: 'oss-cn-beijing', // 区域 我这边是北京 视情况而定
            accessKeyId: '', //oss的keyid
            accessKeySecret: '',//oss的keysecret
            bucket: '',//bucket的名称 自己定
            overwrite: true,
            // putACL: 'public-read', // **webpack-ali-oss-upload 新增参数 设置oss上传文件读写权限**
            // test: true,
            setOssPath: filePath => {
              // some operations to filePath
              let index = filePath.lastIndexOf("dist");
              let Path = filePath.substring(index + 4, filePath.length);
              return Path.replace(/\\/g, "/");
            },
            setHeaders: filePath => {
              // some operations to filePath
              // return false to use default header
              return {
                "Cache-Control": "max-age=31536000"
              };
            }
          })
        ];
        config.plugins = [...config.plugins, ...webpackAliyunOss ];
      }else if(process.env.VUE_APP_MODE === 'test'){
        let webpackAliyunOss = [
          new WebpackAliyunOss({
            from: ['./dist/**',], // 上传那个文件或文件夹  可以是字符串或数组 我这边默认dist全部上传
            dist: "/xxxx/test-www/xxxx/",  // 需要上传到oss上的给定文件目录
            region: 'oss-cn-beijing', // 区域 我这边是北京 视情况而定
            accessKeyId: '', //oss的keyid
            accessKeySecret: '',//oss的keysecret
            bucket: '',//bucket的名称 自己定
            overwrite: true,
            // putACL: 'public-read', // **webpack-ali-oss-upload 新增参数 设置oss上传文件读写权限**
            // test: true,
            setOssPath: filePath => {
              // some operations to filePath
              let index = filePath.lastIndexOf("dist");
              let Path = filePath.substring(index + 4, filePath.length);
              return Path.replace(/\\/g, "/");
            },
            setHeaders: filePath => {
              // some operations to filePath
              // return false to use default header
              return {
                "Cache-Control": "max-age=31536000"
              };
            }
          })
        ];
        config.plugins = [...config.plugins, ...webpackAliyunOss ];
      }

    }

生活枯燥无味,努力才有滋味!!!!!!