vue.config.js

vue-cli 2版本和vue-cli 4版本的项目有着很大的区别，在vue-cli2生成的项目中会存在大量的webpack配置文件如根目录下面的config文件夹中的文件。

vue-cli2配置webpack

如果我们要配置vue-cli2的webpack 可以在config文件夹中配置开发环境和生产环境不同的一些变量然后使用node.js中process.env.NODE_ENV来获取项目当前运行的环境从而实现webpack在不同环境的执行。vue-cli2配置webpack较为繁琐因此推荐使用vue-cli4(升级到vue-cli4后是真的香)

vue-cli4配置webpack

上篇文章我们介绍了使用vue-cli4生成项目之后的目录结构 ,vue-cli4自带的配置默认也可以实现项目的打包如运行 npm run build 就执行了vue-cli4给我们进行默认打包的配置显然默认配置是远远不能满足我们优化需求的。我们需要自己进行相关的配置。首先我们打开项目在项目的根文件新建一个js文件vue.config.js 。之后webpack的相关配置就会在该文件中进行配置。

vue.config.js.png

我们现在进行第一步在vue.config.js中引入 webpack包我们并不需要进行webpack的依赖安装，在我们创建项目时 vue-cli4 自带了webpack

const webpack  = required('webpack')

之后由于我们打包后需要将打包的文件放在某个位置。一般我们都会将打包之后的代码放到项目根目录下因此我们还应该用到 node.js的path模块

//引入path
const path = required('path')
//定义一个方法 之后我们会经常用到
const resolve = dir => path.join(__dirname,dir)
// __dirname 是node.js path模块中定义的一个常量  表示项目的根路径

之后我们可以定义项目的运行环境然后根据项目的运行环境来判断webpack应该执行那些配置要想知道项目的运行环境我们依然需要用到node.js

//定义生产环境的Boolean  process.env.NODE_ENV 即node.js中获取项目环境的值。如果是开发环境且未自定义 则一般默认值为'devlopment' 如果是生产环境且未自定义 则一般默认值为'production'
const is_pro = ['production','prod'].includes(process.env.NODE_ENV)
//定义开发环境的Boolean
const is_dev = ['devlopment','dev'].includes(process.env.NODE_ENV)

接下来我们继续定义一些常量

//productPath 定义这个常量是提供生产环境打包之后的基础路径,我们所生成的打包文件路径都会加上这个基础路径
const productPath = '/SIEMENS/AC-CSZB-20210322/QYWX'
// title 定义title即页面的标题 
const title ='xxx'

做完这些之后我们就可以进行正式的配置了。

module.exports = {
    //如果是生产环境则加上基础路径否则默认为根路径
   publicPath: is_pro ? productPath ：'/'，
    //打包后生成文件的路径 默认为 ’dist‘ 你也可以配合node.js的path自定义打包文件的生成位置
    outputDir:'dist'
    //设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。
    assetsDir：'static'
    // 是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler: false
    // 如果是生产环境 则使用生产环境的 source map 
    productionSourceMap: !IS_PROD,
    chainWebpack : config =>{
    //如果热更新失效  则加上此代码来修复HMR失效
    config.resovle.symlinks(true)
    //配置别名
   config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@v', resolve('src/views'))
      .set('@', resolve('src'))
      .set('@c', resolve('src/components'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@assets', resolve('src/assets'))
   //配置moment 去除除中文包之外其他的包
     config.plugin('ignore').use(
     new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
     )
   //配置打包分析 可以知道你项目那些js占用的体积比较大 一般生产环境进行分析 开发环境则不需要
   //在这之前我们先引入 BundleAnalyzerPlugin插件 
   // const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
    if(is_pro){
        config
         .plugin('webpack-report')
         .use(BundleAnalyzerPlugin,[
            {
             analyzerMode:”static“
             }
        ])
          //配置externals 引入CDN资源 该配置大大的减少了打包之后的体积 
 // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
    // 首先在vue.config.js定义两个常量 baseUrl、cdn
      const baseUrl = 'https://cdn.jsdelivr.net/npm/'
      const cdn = {
           js: [`${baseUrl}vue@2.6.11/dist/vue.min.js`,
                `${baseUrl}vue-router@3.2.0/dist/vue-router.min.js`,
                `${baseUrl}vuex@3.4.0/dist/vuex.min.js`,
                `${baseUrl}view-design@4.0.0/dist/iview.min.js`,
                `${baseUrl}jquery@3.4.1/dist/jquery.min.js`
        ],
          css: [`${baseUrl}view-design@4.0.0/dist/styles/iview.css`]
      }
      //将配置传入html plugin
     config.plugin('html').tap(args ={
                args[0].cdn =cdn
                args[0].title =title    
                return args
            })
    }，
     //还未结束 此时我们还需要继续配置
     configureWebpack: cof =>{
         const plugin = []
         //生产环境的插件
         if(is_pro){
        //这里也是配置externals引入 CDN资源   
        cof.externals = {
         vue: 'Vue',
        'vue-router': 'VueRouter',
         vuex: 'Vuex',
        'view-design': 'iview',
         jquery: 'jQuery'
        }
     }
     // 添加 gzip压缩插件 减少项目打包体积  首先需要安装插件 并且引入插件
     // 终端中输入 npm i  compression-webpack-plugin
     // vue.config.js 中引入  
     // const CompressionWebpackPlugin  =require("compression-webpack-plugin")
     //定义生产环境那些文件需要被压缩  const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
      plugin.push(
      new CompressionWebpackPlugin(
      {
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
      }))
     }
     //通用环境插件
     //添加vue环境下的jquery环境 让vue代码可以使用jquery
     plugin.push(
     new webpack.ProvidePlugin(
     {
        jQuery: 'jquery',
        $: 'jquery',
        'windows.jQuery': 'jquery'
      })
    )
    //提示用户包的体积过大，以此进行性能优化 我设置为警告提醒 单个文件体积不能超过2000000字节
   cof.performance = {
       //提示级别
      hints: 'warning',
       //最大静态资源的打包体积
      maxAssetSize: 2000000,
       //最大入口文件的打包体积
      maxEntrypointSize: 2000000,
       //过滤不需要检测的文件
      assetFilter (assetFilename) {
      return assetFilename.endsWith('.js')
      }
   }
   //将添加的插件都传到配置中
   conf.plugins = [...config.plugins,...plugin]
     //配置css
    css: {
    extract: IS_PROD,
    sourceMap: false,
    requireModuleExtension: true,
    loaderOptions: {}
  },
    //配置开发环境相关的  可以添加proxy属性 配置跨域代理  
  devServer: {
     //是否开启热更新
    hot: true,
     //本地启动地址   
    host: '0.0.0.0',
     //本地启动端口号
    port: 8080,
     // 是否使用https协议
    https: false,
     //是否自动打开浏览器   
    open: false
      // 配置请求代理
    proxy: {
         "/api": {
        target:"https://www.easy-mock.com/mock/xxxxxxxxxxxxxxx", // 目标代理接口地址
        secure: false,
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        // ws: true, // 是否启用websockets
        pathRewrite: {
          "^/api": "/"
        }
      }
    } 
  },
}