vuecli3.9.1架构---部署打包配置区分三种环境，同时支持cdn打包，保证JS最小化的一条龙服务与请求封装案例

首先我的版本如下：

vue3.0文件构造简单，仅仅需要自定义vue.config.js即可

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录 不写则默认根目录
  outputDir: 'dist',
  assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
  // eslint-loader 是否在保存的时候检查
  // lintOnSave: 'error',
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  },
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,

  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md   webpack链接API，用于生成和修改webapck配置
  //部署打包html带引号
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
    config.plugin("html").tap(args => {
      args[0].minify = false;
      return args;
    });
  },
  //压缩打包文件大小
  configureWebpack: config => {
    // if (isProduction) {
    // config.plugins.push(new CompressionWebpackPlugin({
    //   algorithm: 'gzip',
    //   test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    //   threshold: 10240,
    //   minRatio: 0.8
    // }))
    config.externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios': 'axios',
      'jquery': '$',
      'moment': 'moment',
      'js-cookie': 'Cookies',
      'echarts': 'echarts',
      'tinymce/tinymce': 'tinymce'
    }
    // }
  },
  // configureWebpack: (config) => {// webpack配置，值位对象时会合并配置，为方法时会改写配置
  //   if (debug) { // 开发环境配置
  //     config.devtool = 'cheap-module-eval-source-map'
  //   } else { // 生产环境配置

  //   }
  //   Object.assign(config, { // 开发生产共同配置
  //     resolve: {
  //       alias: {
  //         '@': path.resolve(__dirname, './src')//设置路径别名
  //         //...
  //       }
  //     }
  //   })
  // },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置 配置高于chainWebpack中关于css loader的配置
  // css: {
  //   // 是否使用css分离插件 ExtractTextPlugin
  //   extract: true,
  //   // 开启 CSS source maps?是否在构建样式地图，false将提高构建速度
  //   sourceMap: false,
  //   // css预设器配置项
  //   loaderOptions: {},
  //   // 启用 CSS modules for all css / pre-processor files.
  //   modules: false
  // },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores 构建时开启多进程处理babel编译
  //parallel: require('os').cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,

  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  //pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => { }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

 

其次需要根目录下需要以下几个文件

.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

.env.development---这个对应本地地址打包环境

# just a flag
NODE_ENV = 'development'

# base api

VUE_APP_APIUrl = 'http://192.168.2.215:8002/v1'


# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production------这个对应正式环境

# just a flag
NODE_ENV = 'production'

# base api

VUE_APP_APIUrl = 'http://dsoaapi.dszj.com/v1'

#VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'

.env.test-----这个对应正式环境与本地打包环境中间的测试服务器上线环境

# just a flag
NODE_ENV = 'test'

# base api

VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'


# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

最后一步，修改package.json，主要修改为build:test与build:dev

{
  "name": "newsone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:test": "vue-cli-service build --mode test",
    "build:dev": "vue-cli-service build --mode development"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "element-ui": "2.7.2",
    "js-cookie": "^2.2.0",
    "jsonp": "^0.2.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "compression-webpack-plugin": "^3.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

这样我们就彻底完工了，那么只剩下一个小问题，很多人发现我的vue.config.js下有config.externals，这是因为我的public下的index.html需要cnd引入

各位道友，强烈建议大家在修改cdn地址的时候能够选择自己的版本号，我这个是我现在项目所需，具体项目的版本如果一成不变造成的后续问题我一概不保证哟

百度网盘源码地址：

链接：https://pan.baidu.com/s/102nc9oDKntPuj7U_NJSJIw 
提取码：x1e9 

 

github地址：

https://github.com/war3121w/vue3.9.1-.git

 

个人网址：http://www.pjjgrweb.com/