最近公司要求把vuecli2升级到vuecli4，h5使用的是vue单页面，pc使用的多页面，单页面升级还好没遇见什么问题，在升级多页面的时候，遇见了一些问题，现把升级步骤与遇见的问题记录如下：
第一步 安装vue-cli4
npm uni vue-cli -g 卸载vue-cli2
npm i -g @vue/cli 下载vue-cli3
vue -v查看安装版本
第二步 新创建一个空项目
vue create myPoject
第三步 在项目目录下新增vue.config.js 项目结构如下：
多页面入口配置如下：
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 = `{rv}`;
if (lv == 'src') {
pathsrc = rv;
}
// console.log(pathsrc)
pathname = `{basename}`; // 正确输出js和html的路径
entries[pathname] = entry;
// console.log(`{entry}`);
});
return entries;
}
const conf = {};
const entriesjs = getMultiEntry('./src/views/**/index/*.js'); // 获得入口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);
const _publicPath = '../../../';
module.exports = {
pages: conf,
productionSourceMap: false,
lintOnSave: true,
// assetsDir: 'static',
publicPath: process.env.NODE_ENV === 'production' ? _publicPath : '/',
outputDir: '../docker/a/a/a',
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'))
.set('assets', resolve('src/assets'))
.end();
},
// css: {
// loaderOptions: {
// sass: {
// // 根据自己样式文件的位置调整
// prependData: '@import "@/assets/css/index.scss";',
// },
// },
// },
devServer: {
port: '6868',
index: 'views/home/list.html',
open: true,
},
};
第四步 将旧项目中的src文件全部复制到新项目中的src中，旧项目的根目录的index.html转移到新项目的public中，旧项目中如果有static静态文件夹可以转移到public中，如下：
第五步 将旧项目中的package.json中要用的插件按需求复制到新项目中的package.json中
第六步 安装依赖
npm install
第七步 运行项目
npm run serve
根据运行中的报错逐步解决问题,一般都是图片路径跟文件路径问题,手动更改或者全局替换
第八步 打包项目
npm run build
结果上线发现本地启动的时候一切正常，但打包之后会出现element字体图标路径不对，在网上找了许多资料发现都是千篇一律或者都是vuecli2的配置，精挑细选，这篇文章才是王道，vue.config.js新增配置如下
.....................................
const _publicPath = '../../../';
module.exports = {
pages: conf,
productionSourceMap: false,
lintOnSave: true,
// assetsDir: 'static',
publicPath: process.env.NODE_ENV === 'production' ? _publicPath : '/',
outputDir: '../docker/a/a/a',
chainWebpack: (config) => {
// 匹配相应的文件进行配置
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap((options) => {
options.limit = 4096;
options.publicPath = _publicPath; // **重点：添加路径
return options;
});
config.module
.rule('media')
.use('url-loader')
.loader('url-loader')
.tap((options) => {
options.limit = 10000;
options.publicPath = _publicPath; // **重点：添加路径
return options;
});
config.module
.rule('fonts')
.use('url-loader')
.loader('url-loader')
.tap((options) => {
options.limit = 4096;
options.publicPath = _publicPath; // **重点：添加路径
return options;
});
................................
},
};
到此vue多页面项目升级成功
