前提
几年前的项目,使用"webpack": "^3.6.0"
不支持 ES2020,导致一些依赖无法使用,各种升级配置太过麻烦,于是想用vue-cli直接替换掉webpack。
主要技术栈: vue2 + elementUI。
步骤
- 安装Vue CLI
- 创建新项目
- 迁移源代码
- 调整配置
- 测试和调试
安装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
,重新安装。