vue-cli3 配置多坏境打包

多环境配置
NODE_ENV = production
VUE_APP_URL = “http://192.168.0.101”

配置axios请求基础api的ip地址 api.request.js
不配置多环境 const baseUrl = process.env.NODE_ENV === ‘development’ ? config.baseUrl.dev : c

config.baseUrl.pro
配置多环境  const baseUrl =  process.env.VUE_APP_URL
文件代码完整:
import HttpRequest from '@/libs/axios'
import config from '@/config'
// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const baseUrl =  process.env.VUE_APP_URL
const axios = new HttpRequest(baseUrl)
export default axios

当然接口请求的ip也可以在config里面配置

打包文件压缩
安装相关依赖包：
npm install --save-dev image-webpack-loader
npm install --save-dev compression-webpack-plugin

配置vue.config.js 将下列代码贴上（以下标红字段为必须，不然除了生产包均是不压缩文件）
如果配置了以上多环境 那么绿色部分是无效的

const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")
const resolve = dir => { return path.join(__dirname, dir) }
// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'
module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  // publicPath: BASE_URL,
  publicPath: './',
  outputDir: process.env.NODE_ENV === 'development' ? 'dist' : 'devdist', // 不同的环境打不同包名
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,
  chainWebpack: config => {
    // 解决ie11兼容ES6
    config.entry('main').add('babel-polyfill')
    // 开启图片压缩
    config.module.rule('images')
    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
      .use(new CompressionPlugin({
        test:/\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
    }
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
      .set('@plugins', resolve('src/plugin'))
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  transpileDependencies: [],
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  devServer: {
    proxy: 'http://47.102.109.120:18083',
    // proxy: 'http://192.168.0.109:8083'
    // VUE_APP_URL = "http://192.168.0.122:8083"
  }
}

标签：多坏境,const,cli3,process,app,baseUrl,webpack,vue,config
来源： https://blog.csdn.net/weixin_44191425/article/details/120163695