vue2项目，记一次webpack改vue-cli

前提

几年前的项目，使用"webpack": "^3.6.0"不支持 ES2020，导致一些依赖无法使用，各种升级配置太过麻烦，于是想用vue-cli直接替换掉webpack。

主要技术栈： vue2 + elementUI。

步骤

1. 安装Vue CLI
2. 创建新项目
3. 迁移源代码
4. 调整配置
5. 测试和调试

安装Vue CLI

首先，全局安装Vue CLI。使用npm安装：

npm install -g @vue/cli
# yarn global add @vue/cli

安装完成后检查版本：

vue -V 
#vue --version

打印@vue/cli 5.0.8

创建新项目

vue create my-project

或者

vue ui

选择自己需要的配置。

我需要vue-router vuex sass-loader。

迁移源代码

把源代码迁移到新的Vue项目中：

1、依赖安装

package.json复制dependencies中的依赖，并npm install。devDependencies下的基本不用复制，因为webpack babel相关的依赖被@vue/cli集成了。

附个对比：

2、复制src/

文件夹一一对应，旧项目的sratic文件夹，直接复制到新项目的根目录。

注：按理来说应该将sratic里的内容迁移到public中，但是要改不少项目中的引入路径，所以使用'copy-webpack-plugin'省略掉这步了。

src/assets src/compontents src/utils src/store src/router src/views 等文件夹直接复制到新项目中。

App.vue main.js内容直接复制。路由根据环境变量引入了不同文件，所以代码修改下：

// 修改前
import router from './router/index_APP_TARGET.js'
​
// 修改后
import routerDevConfig from './router/router.dev.js';
import routerProdConfig from './router/router.prod.js';
const router = process.env.NODE_ENV === 'prod' ? routerProdConfig : routerDevConfig;

index.html文件复制完修改下页面引入的静态路径地址，因为旧项目的index.html在根目录中，新项目的在public/下。

调整配置

1、环境变量的配置

原项目中config\dev.env.js cnfig\prod.env.js配置了不同的环境变量，根据环境变量渲染不同的路由、代码里也有不同环境变量不同逻辑的判断、运行与打包也有差异。

"scripts": {
    "dev--dev": "cross-env NODE_ENV=dev env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev": "cross-env NODE_ENV=prod env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build--dev": "cross-env NODE_ENV=dev env_config=dev node build/build.js",
    "build": "cross-env NODE_ENV=prod env_config=prod node build/build.js"
  }

新项目中，根目录新增.env.dev .env.prod文件，配置环境变量，并修改package.json的"scripts"：

"scripts": {
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:prod": "vue-cli-service serve --mode prod",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod"
  },

2、在vue.config.js文件中进行适当的调整。

build下的webpack配置，很多都不需要配置，可以先配置一部分，再根据报错信息调整。目前只保证了最基本的运行打包没有问题，尚未做优化。

目前完整代码：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const path = require('path');
​
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: 'static', // 添加静态资源目录配置
  productionSourceMap: false, // 生产环境下是否生成 source map 文件
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        // additionalData: `@import "@/styles/variables.scss";` // 引入全局变量文件
        extract: false, // 构建过程中不将 CSS 提取为独立的文件
        sourceMap: false // 不生成 CSS 的 source map 文件
      },
    }
  },
  // 配置webpack相关的设置，包括添加插件、修改loader
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    optimization: {
      minimize: true,
      // minimizer: [
      //   new TerserPlugin({
      //     terserOptions: {
      //       compress: {
      //         drop_console: true,
      //         drop_debugger: true,
      //         pure_funcs: ['console.log']
      //       }
      //     }
      //   })
      // ],
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
      }
    },
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
      }
    },
    plugins: [
      {
        apply: (compiler) => {
          const CopyPlugin = require('copy-webpack-plugin');
          new CopyPlugin({
            patterns: [
              {
                from: 'static',
                to: 'static',
                globOptions: {
                  ignore: ['.*']
                }
              }
            ]
          }).apply(compiler);
        }
      }
    ]
  },
  // 处理vue-cli5下的drop_console，其他版本有别的处理方式
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer('terser').tap(options => {
        options[0].terserOptions.compress.drop_console = true;
        return options
      })
    }
  },  
  devServer: {
    proxy: {
      '/': {
        target: '...',
        changeOrigin: true, // 避免跨域
        ws:false,
        pathRewrite: {
          '^/': ''
        },
        secure: false, // 是否使用https
      }
    }
  }
})

测试和调试

启动项目，根据错误再调整。

1、报错：识别不了/deep/和>>>

用::v-deep全局替换，ok

有些像 Sass 之类的预处理器无法正确解析 >>>。（vue2官网说的，但为什么/deep/也不支持，没去查询）

2、报错：找不到$

// main.js
​
// 修改前
import 'jquery'
​
// 修改后
import $ from 'jquery'
window.$ = $

3、打包后static内无直接的静态文件

修改如上方vue.config.js里的CopyPlugin配置。

4、未清除console

vue-cli5 使用 terser-webpack-plugin未生效，因为移除了drop_console。

解决参考地址：

vue项目打包清除console.log的四种方法总结

@vue/cli去除Console链式配置

window.console.log = function () {}实测可行，但是在引入这句话之前的打印依旧还存在。

其他vue-cli5 对 drop_console的修改，实测只有第二个超链接的有用：

chainWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.optimization.minimizer('terser').tap(options => {
      options[0].terserOptions.compress.drop_console = true;
      return options
    })
  }
}

无报错后，运行不同环境变量，验证是否有问题；打包不同环境变量的包，验证是否有问题。

最后

旧项目新建分支，将新项目代码全部复制进去，删除node_modules，重新安装。