vue-cli3.0项目结构多环境打包配置

前言：vue项目配置不同的命令打包不同环境的dist包
npm run build:dev-----生成环境
npm run build:pro------开发环境
npm run build:text------测试环境

1.vue-cli3.0项目结构
配置之前先确定一下目录结构是否是3.0的 这里只写3.0的配置

2.开始配置
package.json文件添加

"build:dev": "vue-cli-service build --mode development",
"build:pro": "vue-cli-service build --mode production",
"build:text": "vue-cli-service build --mode text"

3、分别建立这三个文件
1）.env.development

NODE_ENV = 'development'
VUE_APP_BASE = 'dev'
outputDir = dev_dist//打包生成的包名

2）.env.production

NODE_ENV = 'production'
VUE_APP_BASE = 'pro'
outputDir = pro_dist

3）.env.test

NODE_ENV = 'text'
VUE_APP_BASE = 'text'
outputDir = test_dist 

4、vue.config.js设置

module.exports = {
  lintOnSave: false,
  outputDir: process.env.outputDir, // 不同的环境打不同包名
  publicPath: process.env.NODE_ENV === 'production' ? './': '/',
}

5、其余的配置可以参考 官网配置vue官网配置地址

https://vue3js.cn/docs/zh/guide/migration/introduction.html

6、utils/request.js设置
方法一：

const baseURL = 'api地址'
if (process.env.NODE_ENV === 'production') {
  // 为生产环境修改配置...
  console.log('prod')
} else if (process.env.NODE_ENV === 'test') {
  // 为测试环境修改配置...
  console.log('test')
} else if (process.env.NODE_ENV === 'development') {
  // 为开发环境修改配置...
  console.log('dev')
}
// 配置路径
const request = axios.create({
  baseURL
})

方法二：

const request = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
})