为了区分项目是生产还是开发模式，以及外部CDN资源引用(生成模式使用CDN，开发模式使用本地资源)，需要根据不同的模式，修改public/index.html的title和cdn引入方式

    1. 修改vue.config.js文件，添加是否为生产模式的标记

      1. module.exports={
      2. // 如果打包文件资源路径没有dist
      3. publicPath: '',
      4. chainWebpack:config =>{
      5.  // 生产环境
      6.  config.when(process.env.NODE_ENV === 'production', config => {
      7.    config.entry('app').clear().add('./src/main-prod.js')
      8.    // 生产模式下，html的isProd标记为true
      9.    config.plugin('html').tap(args =>{
      10.      args[0].isProd = true
      11.      return args
      12.    })
      13.  })
      14.  // 开发环境
      15.  config.when(process.env.NODE_ENV === 'development', config => {
      16.    config.entry('app').clear().add('./src/main-dev.js')
      17.    // 开发模式下，html的isProd标记为false
      18.    config.plugin('html').tap(args =>{
      19.      args[0].isProd = false
      20.      return args
      21.    })
      22.  })
      23. }
      24. }

    2. 编辑public下的index.html文件，根据不同环境修改title和资源引入方式

      1. <head>
      2.  <meta charset="utf-8">
      3.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
      4.  <meta name="viewport" content="width=device-width,initial-scale=1.0">
      5.  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      6.  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev-' %><%= htmlWebpackPlugin.options.title %></title>
      7.    <% if(htmlWebpackPlugin.options.isProd){ %>
      8.    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.2/css/all.min.css" />
      9.    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
      10.    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
      11.    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mavon-editor@2.9.1/dist/css/index.css" />
      12.    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
      13.    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>
      14.    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
      15.    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
      16.    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js"></script>
      17.    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
      18.    <script src="https://cdn.jsdelivr.net/npm/mavon-editor@2.9.1/dist/mavon-editor.js"></script>
      19.    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
      20.    <% } %>
      21. </head>