详解vue-cli3多页应用改造

2020-06-14 06:28:46易采站长站整理

.set('@stocktake', resolve('src/pages/stocktake'))
/**
* 菜单icon处理为svg-sprite
*/
config.module
.rule('svg')
.exclude
.add(resolve('src/assets/icons/menus'))
.end()
config.module
.rule('svg-sprite-loader')
.test(/.svg$/)
.include
.add(resolve('src/assets/icons/menus')) // 处理目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
}
}

/**
* 组装页面
*/
function setPages () {
let pages = {}
glob.sync(PAGES_PATH).forEach(filepath => {
let fileList = filepath.split('/')
let fileName = fileList[fileList.length - 2]

pages[fileName] = {
entry: filepath,
template: 'public/index.html',
filename: `${fileName}.html`,
// title:
chunks: ['chunk-vendors', 'chunk-common', fileName] }
})
return pages
}

/**
* 注入公共less
* @param rule
*/
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/assets/styles/variable.less')
] })
}

Step3: 拷贝原项目src目录至pages下,大概长这样

Step4: 各产品原项目下package.json依赖包都挪到根目录下package.json,重新安装

PS:由于依赖向上升级,某些老版本依赖包可能会存在升级引发的问题,需要细心走查一遍。这里由于业务不一样,就不详细赘述了

然后npm start,完美启动~