之前公司使用的是vuecli2搭建的vue项目，最近到了空闲期打算将vue脚手架升级为vuecli4
一，升级本地环境
1，将node升级到最新版本，所以我们先去 官网下载 一个稳定的新版本覆盖本地版本,
2，本地全局安装了 2.0 的环境，所以需要全局卸载再安装 4.0
npm uninstall -g vue-cli
npm install -g @vue/cli
安装好了之后输入 vue -V 查看版本
二、搭建项目
vue create <Project Name> //文件名 不支持驼峰（含大写字母）
会出现让你选择使用哪种安装方式 vue2 vue3 还是手动方法配置 如果之前你又配置过会默认你之前配置过的条件
我们选择最后一个 手动配置会让你选择需要配置什么
接着会问你安装vue版本 我们这里选择2.0版本
选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置
css 的预处理器我选择的是 Sass/SCSS(with dart-sass)
选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多
然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个
下面就是如何存放配置了，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中本着项目结构简单的想法，我选择了第二个
最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字下次安装会出现你本次的安装配置 如我上面所说的
接着等待安装
出现如图红框所示的提示，就搭建成功，进入项目目录，直接输入 npm run serve 就可以了
三 文件迁移
src=======src文件里面
index.html与static文件夹========public文件夹里面
package.json===(选择性迁移过去)=====package.json
四 项目配置
新建一个 vue.config.js 文件来覆盖项目的配置，可以 访问官方文档
由于重构项目为vue多页面 因此pages配置如下：
const path = require('path');const glob = require('glob');function resolve(dir) { return path.join(__dirname, dir);}// 获取多级的入口文件function getMultiEntry(globPath) { const entries = {}; let basename; let pathname; glob.sync(globPath).forEach((entry) => { basename = path.basename(entry, path.extname(entry)); const [lv, rv] = entry.split('/').splice(-4); // console.log('tmptmptmp====', tmp); let pathsrc = `${lv}/${rv}`; if (lv == 'src') { pathsrc = rv; } // console.log(pathsrc) pathname = `${pathsrc}/${basename}`; // 正确输出js和html的路径 entries[pathname] = entry; // console.log(`${pathname}-----------${entry}`); }); return entries;}const conf = {};
// 获得入口js文件 根据自己的目录文件进行配置（src/views/home/index/index.js
||src/views/other/index/other.js）
const entriesjs = getMultiEntry('./src/views/**/index/*.js'); Object.keys(entriesjs).forEach((pathname) => { console.log('entriesjsentriesjs', pathname); const fileName = entriesjs[pathname].substring('', entriesjs[pathname].lastIndexOf('.')); conf[pathname] = { /* 返回对应的入口页面配置（根据自己的项目修改配置），详情见vue-cli官网 */ template: `${fileName}.html`, entry: `${entriesjs[pathname]}`, filename: `${pathname}.html`, chunks: [pathname, 'vendors', 'manifest'], inject: true, // title: fileName, }; return conf;});console.log('confconfconfconf===', conf);module.exports = { pages: conf, productionSourceMap: false, lintOnSave: true, // assetsDir: 'static', publicPath: '/', outputDir: '', chainWebpack: (config) => { // 移除 prefetch、preload加载模式 config.plugins.delete('preload'); // 默认为index.html config.plugins.delete('prefetch'); // 默认为index.html config.optimization .splitChunks({ cacheGroups: {}, }) .end() .resolve.alias.set('@', resolve('src')) .set('@c', resolve('src/components')) .set('@v', resolve('src/views')) .set('@public', resolve('public')) .end(); }, css: { loaderOptions: { sass: { // 根据自己样式文件的位置调整 prependData: '@import "@/assets/css/index.scss";', }, }, }, devServer: { port: '8092', index: 'views/home/index.html', open: true, },};
五 运行项目
npm install
npm run serve
运行中可能出现插件安装不齐全 图片地址不对 重新安装插件 修改图片地址，问题解决后，项目运行正常
