vue-cli3单页面转多页面

一、创建一个vue项目

1、安装vue-cli@3.x

npm install -g @vue/cli

 如果之前安装过vue-cli@2.x，则需要先进行卸载

npm uninstall vue-cli -g

 2、创建项目

vue create projectName

创建好的项目目录如下

 

二、多页面转换目录调整

对目录进行修改，同步对文件进行相应的修改（修改引用路径及引用名称），src/pages 下的每一个项目即为一个单页面，都有其相应的router，store，views，app.vue，main.ts文件。public下为每一个单页创建其相应的html文件。

目录改造后如下

 

三、更改配置

1、根目录下创建build文件夹，新增以下三个文件

新增utils.js文件，输出需要用到的方法

utils.js

// 使用glob前需要进行安装，npm install glob --save-dev
const glob = require('glob')
const fs = require('fs')

module.exports = {
    // 根据命令参数中的项目名称配置相应的pages
    getPages:globPath => {
        const entries = {}
        glob.sync(globPath).forEach(function(entry) {
            const paths = entry.split('/') || []
            const moduleName = paths[3]
            let moduleIndexHtmlPath = `public/${moduleName}/index.html`
            let template = (fs.existsSync(moduleIndexHtmlPath) && moduleIndexHtmlPath) || 'public/index.html'
            entries[moduleName] = {
                entry, // 入口文件
                template:template, // 模板文件
                filename:'index.html' // 文件名
            }
        })
        return entries
    },
    // 获取命令行中携带的项目名称
    getCommandParam: key => {
        const reg = new RegExp(`^--${key}`)
        const index = process.argv.findIndex(argv => reg.test(argv))
        return process.argv[index] && process.argv[index].split('=')[1]
    }
}

新增dev.js文件，运行项目

const { exec } = require('child_process')
const projects = process.argv.slice(2)

projects.forEach(project => {
    let workerProcess = exec('vue-cli-service serve --project=' + project,{
        maxBuffer: 1024 * 1024 * 10
    },(err) => {
        if(err){
            console.error(err)
        }
    })
    workerProcess.stdout.on('data',function(data){
        console.log(data)
    })
})

新增build.js文件，打包项目

const { exec } = require('child_process')
const projects = process.argv.slice(2)

projects.forEach(project => {
    let workerProcess = exec(`vue-cli-service build --project=${project}`, {maxBuffer: 1024*1024*10}, (err) => {
        if (err) {
            console.error(err)
        }
    })
    workerProcess.stdout.on('data', function (data) {
        console.log(data)
    })
})

2、创建vue.config.js

 vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

const {getPages,getCommandParam} = require('./build/utils')
const fs = require('fs')

// 获取命令行中携带的需要构建的项目名称
const project = getCommandParam('project')
// 获取需要构建的项目的入口文件
const pages = getPages(`./src/pages/${project}/main.ts`)

module.exports = {
    outputDir: `dist/${project}`, // 打包时的输入目录
    publicPath: `/${project}`, // 基本路径
    pages:{
        ...pages
    },
    chainWebpack:config => {
        // 只把当前需要打包的项目的文件复制到dist相应的目录下
        config.plugin('copy').tap(options => {
            if(fs.existsSync(`public/${project}`)){
                options[0][0] = {
                    from: `public/${project}`,
                    to:'',
                    toType:'dir',
                    ignore:[]
                }
            }else {
                options[0] = []
            }
            return options
        })
    }
}

3、修改package.json

修改scripts对象

 

 四、运行

// 运行单个项目
yarn serve about
yarn serve home

// 同时运行多个项目
yarn serve about home