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安装:

sh 复制代码
npm install -g @vue/cli
# yarn global add @vue/cli

安装完成后检查版本:

sh 复制代码
vue -V 
#vue --version

打印@vue/cli 5.0.8

创建新项目

sh 复制代码
vue create my-project

或者

sh 复制代码
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内容直接复制。路由根据环境变量引入了不同文件,所以代码修改下:

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配置了不同的环境变量,根据环境变量渲染不同的路由、代码里也有不同环境变量不同逻辑的判断、运行与打包也有差异。

json 复制代码
"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"

json 复制代码
"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配置,很多都不需要配置,可以先配置一部分,再根据报错信息调整。目前只保证了最基本的运行打包没有问题,尚未做优化。

目前完整代码:

js 复制代码
// 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')
      }
    },
    plugins: [
      {
        apply: (compiler) => {
          const CopyPlugin = require('copy-webpack-plugin');
          new CopyPlugin({
            patterns: [
              {
                from: 'static',
                to: 'static',
                globOptions: {
                  ignore: ['.*']
                }
              }
            ]
          }).apply(compiler);
        }
      }
    ]
  },
  devServer: {
    proxy: {
      '/': {
        target: '...',
        changeOrigin: true, // 避免跨域
        ws:false,
        pathRewrite: {
          '^/': ''
        },
        secure: false, // 是否使用https
      }
    }
  }
})

测试和调试

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

报错:识别不了/deep/和>>>

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

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

报错:找不到$
js 复制代码
// main.js
​
// 修改前
import 'jquery'
​
// 修改后
import $ from 'jquery'
window.$ = $
打包后static内无直接的静态文件

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

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

最后

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

相关推荐
~甲壳虫3 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
Beamon__3 小时前
element-plus按需引入报错AutoImport is not a function
webpack·element-plus
CodeToGym3 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫3 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫3 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
lin-lins1 天前
模块化开发 & webpack
前端·webpack·node.js
柳鲲鹏2 天前
LINUX/CMAKE编译opencv_contrib
linux·opencv·webpack
前端李易安2 天前
webpack的常见配置
前端·webpack·node.js
魏大帅。3 天前
Webpack入门教程:从基本概念到优化技巧
前端·webpack·node.js
web_code3 天前
webpack源码快速分析
前端·webpack·源码阅读