vue.config.js基本配置

方法一 (vue3)

vue.config.js 

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    port: 8080,
    host:'127.0.0.1',
    open: true,
    allowedHosts: '*'
  },
  publicPath: './',
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // #region 忽略生成环境打包的文件
      var externals = {
        'vue': 'Vue',
        'axios': 'axios',
        'element-plus': 'ElementPlus',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'nprogress': 'NProgress',
        'echarts': 'echarts'
      }
      config.externals(externals)

      // 在html文件中引入相关CDN
      const cdn = {
        css: [
          // element-ui css
          'https://unpkg.com/[email protected]/dist/index.css',
          // nprogress
          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css'
        ],
        js: [
          // vue
          'https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.runtime.global.prod.min.js',
          // vue-router
          'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.14/vue-router.global.prod.min.js',
          // vuex
          'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js',
          // axios
          'https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js',
          // element-plus
          'https://unpkg.com/[email protected]/dist/index.full.min.js',
          // echarts
          'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.common.min.js',
          // nprogress
          'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js',
          // core-js
          'https://cdn.bootcdn.net/ajax/libs/core-js/3.21.1/minified.min.js',
          // less
          'https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js',
          // typescript
          'https://cdn.bootcdn.net/ajax/libs/typescript/4.3.5/typescript.min.js'
        ]
      }
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
    }

    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main.ts')
      config.plugin('html').tap(args => {
        // args[0].isProd = false
        args[0].cdn = { css: [], js: [] }
        return args
      })
    })
  }
})

index.html

  
    
    
    
    
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      
      
    <% } %>
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      
      
    <% } %>
    
  
  
    
    

    
  

方法二 (vue2)

 vue.config.js

module.exports = {
  devServer: {
    host:'127.0.0.1',
    port: 8000,
    open: true,
    disableHostCheck: true
  },
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-pro.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

index.html

  
    
    
    
    
    
    <% if(htmlWebpackPlugin.options.isProd){ %>
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    

    
    

    <% } %>