Vue3多页面搭建以及两种按页面打包的方式

先来看一下项目结构，新建pages文件夹，该目录下多页面又分别按名称建立相应的文件夹，vue文件其实就是组件而js文件就是入口，相当于单页面搭建好时的main.js 文件，vue3还需要在根目录下新建一个vue.config.js文件，此文件名字时规定的。

配置vue.config.js文件

let pageMethod = require('./src/utils/getPages')
let pages = pageMethod.pages()
module.exports = {
  productionSourceMap: false, // 生产禁止显示源代码
  pages: pages, // 多页面的具体配置
  // 开发环境配置 
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-base-front/'
    : '/'
}

新建utils文件夹，在文件夹下新建getPages.js文件
npm安装glob，（glob的作用是拿到文件夹里的各种文件）

const glob = require('glob')
let pages = {} // 存放分页
module.exports.pages = function () {
  // 遍历拿到所有的js目录，如 ./src/pages/index/index.js
  glob.sync('./src/pages/*/*.js').forEach(filepath => {
    // 使用 / 为分割形成数组 如 ‘.’ ‘src’ ‘pages’ ‘index’ ‘index.js’
    let fileList = filepath.split('/')
    // 拿到倒数第二项 如 index
    let fileName = fileList[fileList.length - 2]
    pages[fileName] = {
      // 入口文件
      entry: 'src/pages/' + fileName + '/' + fileName + '.js',
      // 模板文件，我使用的是一个公共的，也可以按照自己的需求配置
      template: 'public/index.html',
      // 打包后dist文件夹输出的名字
      fileName: fileName + '.html',
      chunks: ['chunk-vendors', 'chunk-common', fileName]
    }
  })
  return pages
}

现在多页面项目就已经搭建好了
访问时如 http://localhost:8080/index
http://localhost:8080/fall

但是现在，如果你运行npm run bild 打包出来的文件结构却不是我们所期望的，所以我们需要使用fs重新构建dist的文件结构，首先在utils中新建4个文件，login不用管时以前测试的

具体代码如下
cssCopy.js

const fs = require('fs')
const glob = require('glob')
// 读取写入删除css
let callbackFile = function (src, dst) {
  // console.log(dst)
  // console.log(src)
  // 读取css文件的具体值，拿到data
  fs.readFile(src, 'utf-8', function (error, data) {
    if (error) {
      console(error)
      return false //  返回假值，终止
    }
    // console.log(data)
    // 把拿到的值写入到新建的CSS文件里面
    fs.writeFile(dst, data.toString(), 'utf-8', function (error) {
      if (error) {
        console.log(error)
        return false
      }
      // console.log('CSS写入成功')
      // 删除原本的CSS文件
      fs.unlink(src, function () {
      })
    })
  })
}
// 拿到所有css文件，并重新构造dist目录
glob.sync('./dist/css/*.css').forEach((filepath, name) => {
  // console.log(filepath)  如./dist/css/index.a01318f8.css
  // 使用 . 为分割形成数组 如[ '', '/dist/css/index', 'a01318f8', 'css' ]
  let fileNameList = filepath.split('.')
  // 拿到数组中第一项，第一项用 / 分割，然后又拿到分割完的第三项 如index
  let fileName = fileNameList[1].split('/')[3]
  // 使用 / 为分割形成数组，拿到第三项 如index.a01318f8.css
  let copyName = filepath.split('/')[3]
  // 你想新建的目录结构 如 dist文件夹下的index文件夹下的css文件夹
  let changeDirectory = './dist/' + fileName + '/css'
  // console.log(changeDirectory)
  if (!fileName.includes('chunk-vendors')) {
    // eslint-disable-next-line node/no-deprecated-api
    // 判断路径是否已经存在
    fs.exists(changeDirectory, function (exists) {
      // exists 如果返回true说明路径存在
      if (exists) {
        console.log(fileName + '下CSS文件已经存在')
        // 存在的话直接调用函数
        callbackFile(filepath, changeDirectory + '/' + copyName)
      } else {
        // 不存在的话新建目录，目录只能一层一层建，如 dist文件夹下建立index文件夹
        fs.mkdir('./dist/' + fileName, function () {
          // 第二层目录， index文件夹下建立css文件夹
          fs.mkdir(changeDirectory, function () {
            // 调用函数
            callbackFile(filepath, changeDirectory + '/' + copyName)
            // console.log(fileName + '下CSS文件创建成功')
          })
        })
      }
    })
  }
})

jsCopy.js

var fs = require('fs')
const glob = require('glob')
var callbackFile = function (src, dst) {
  // console.log(src)
  // 读取js里面的data
  fs.readFile(src, 'utf-8', function (error, data) {
    if (error) {
      console.log('读取报错')
      console(error)
      return false //  返回假值，终止
    }
    // 写入js dst为新建的路径
    // console.log(data)
    // console.log(dst)
    fs.writeFile(dst, data.toString(), 'utf-8', function (error) {
      if (error) {
        console.log('写入报错')
        console.log(error)
        return false
      }
      // console.log('js写入成功')
      // 删除原来的js
      fs.unlink(src, function () {
      })
    })
  })
}
// 复制目录
glob.sync('./dist/js/*.js').forEach((filepath, name) => {
  let fileNameList = filepath.split('.')
  let fileName = fileNameList[1].split('/')[3]
  let copyName = filepath.split('/')[3]
  let changeDirectory = './dist/' + fileName + '/js'// 多页面JS文件地存放址
  // console.log(fileName)
  // console.log(changeDirectory)
  if (!fileName.includes('chunk-vendors')) {
    // eslint-disable-next-line
    fs.exists(changeDirectory, function (exists) {
      // exists 如果返回true说明路径存在
      if (exists) {
        // console.log(fileName + '下JS文件已经存在')
        callbackFile(filepath, changeDirectory + '/' + copyName)
      } else {
        fs.mkdir('./dist/' + fileName, function () {
          fs.mkdir(changeDirectory, function () {
            callbackFile(filepath, changeDirectory + '/' + copyName)
            // console.log(fileName + '下JS文件创建成功')
          })
        })
      }
    })
  }
})

htmlCopy.js

const fs = require('fs')
const glob = require('glob')
let callbackFile = function (src, dst) {
  // console.log(dst)
  // console.log(src)
  // 读取
  fs.readFile(src, 'utf-8', function (error, data) {
    if (error) {
      console.log('读取报错')
      console(error)
      return false //  返回假值，终止
    }
    fs.writeFile(dst, data.toString(), 'utf-8', function (error) {
      if (error) {
        console.log('写入错误')
        console.log(error)
        return false
      }
      console.log('html写入成功')
      // 删除html
      fs.unlink(src, function () {
        // 删除全本目录的html成功
      })
    })
  })
}
glob.sync('./dist/*.html').forEach((filepath, name) => {
  let fileNameList = filepath.split('.') 
  let fileName = fileNameList[1].split('/')[2] 
  let copyName = filepath.split('/')[2] 
  let changeDirectory = './dist/' + fileName
  console.log('filepath' + filepath)
  console.log('copyName' + copyName)
  console.log('fileName' + fileName)
  fs.exists(changeDirectory, function (exists) {
    // exists 如果返回true说明路径存在
    if (exists) {
      // console.log(fileName + '下html文件已经存在')
      callbackFile(filepath, changeDirectory + '/' + copyName)
    } else {
      fs.mkdir(changeDirectory, function () {
        callbackFile(filepath, changeDirectory + '/' + copyName)
        // console.log(fileName + '下html文件创建成功')
      })
    }
  })
})

最后找到package.json
build时直接调用js文件

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node src/utils/jsCopy.js && node src/utils/cssCopy.js && node src/utils/htmlCopy.js",
    "lint": "vue-cli-service lint"
  },

打包后的项目结构如下，根目录下的css和js为公共

打包方法二
只需要配置vue.config.js得到同样效果

let projectname = process.argv[3] // node.js用变量环境拿到名字
const glob = require('glob')
function getEntry () {
// 存放页面
let entries = {}
// 在开发环境下可以使用node.js直接拿到文件名打包
if (process.env.NODE_ENV === 'production') {
entries[projectname] = {
// page的入口
entry: 'src/pages/' + projectname + '/' + projectname + '.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: projectname + '.html',
title: projectname,
chunks: ['chunk-vendors', 'chunk-common', projectname]
}
} else {
// 使用glob拿到所有分页
let items = glob.sync('./src/pages/*/*.js')
for (let i in items) {
let filepath = items[i]
// 使用'/'分隔拿到的值形成数组
let fileList = filepath.split('/')
// 减去两个字符即文件名
let fileName = fileList[fileList.length - 2]
entries[fileName] = {
entry: filepath,
template: 'public/index.html',
filename: fileName + '.html',
title: fileName,
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
}
}
return entries
}
let pages = getEntry()
console.log(pages)
module.exports = {
productionSourceMap: false, // 生产禁止显示源代码
outputDir: 'dist/' + projectname,
pages: pages,
publicPath: process.env.NODE_ENV === 'production'
? '/vue-base-front/'
: '/',
}

不过此方法直接npm run build会报错
需要一个一个页面的进行打包
如 npm run build index
npm run build fall

参考：https://blog.csdn.net/lizhen_software/article/details/84636143
参考：https://www.wandouip.com/t5i168332/