vue.config.js

// externals配置
const cdn = {
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
  },
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js',
    'https://unpkg.com/vue-router@3.0.6/dist/vue-router.js',
    'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js'
  ],
  css: [
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
  ]
}


// 配置
configureWebpack: {
    externals: cdn.externals
},
chainWebpack: config => {
    // 注入变量，方便在html模板中使用
    config.plugin('html').tap((args) => {
      args[0].cdn = cdn
      return args
    })
}

index.html

 <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
  
  <!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

在index.html使用一些简单的自定义变量,不需要通过chainWebpack注入

1. 创建.env.development文件 (.env.production)

2. 
# just a flag
ENV = 'development'

# base api （必须VUE_APP_***）
VUE_APP_BASE_API = '/dev-api'

3. 在index.html中使用
<%= VUE_APP_BASE_API %>

4. 在项目其他位置中使用
process.env.VUE_APP_BASE_API