demo地址:https://github.com/lmy01/vue-multipage
本次项目由于分为客户端和客服端,第一反应便是在vue中构建多页面。

项目结构:这里主要讲解下面所标文件的用处
在这里插入图片描述
vue.config.js相关配置:
在这里插入图片描述
配置好之后,运行npm run build,项目被打包到dist文件夹下,结果如下图:
在这里插入图片描述
可以看出不同项目的资源都会打包到了一起,但这不是我想要的结果,那么接下来只需要修改一下vue.config.js配置,即可使打包的文件按照项目进行分离。
在这里插入图片描述

let projectName = process.argv[3]
let glob = require('glob')

function getEntry() {
  let entries = {}
  if (process.env.NODE_ENV == 'production') {
    entries = {
      index: {
        // page的入口
        entry: 'src/views/' + projectName + '/'+projectName+'.js',
        // 模板来源
        template: 'public/'+projectName+'.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        title: 'CIMS--'+projectName,
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
  } else {
    let items = glob.sync( './src/views/*/*.js')
    for (let i in items) {
      let filepath = items[i]
      let fileList = filepath.split('/');
      let fileName = fileList[fileList.length-2];
      entries[fileName] = {
        entry: `src/views/${fileName}/${fileName}.js`,
        // 模板来源
        template: `public/${fileName}.html`,
        // 在 dist/index.html 的输出
        filename: `${fileName}.html`,
        title:`CIMS--${fileName}`,
        // 提取出来的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', fileName]
      }
    }
  }
  return entries
}

let pages = getEntry()

module.exports = {

    outputDir: 'dist/' + projectName,
    productionSourceMap: false,
    pages:pages,
}

注意:这时候再打包需要逐个对项目进行打包,npm run build client npm run build console,下面就是打包后的每个项目文件夹下的文件。
在这里插入图片描述
但是我们发现public里面的模板文件也被打包进来了,这是因为public是专门存放静态文件的,打包的时候会把public里的内容原样输出到打包后的文件夹中,如果我们不想让他打包进去,那么就把模板文件从public文件夹中拿出来,我们在项目根目录下重新建一个文件夹(/html),用来存放这两个模板文件。
在这里插入图片描述
最后一步,把vue.config.js配置里的模板文件路径修改一下。
在这里插入图片描述
运行npm run build client 和 npm run build console,发现原来的模板文件没有了。
在这里插入图片描述
补充:开发环境如何进入不同项目环境

npm run dev 后,浏览器会打开一个页面并提示找不到路径
在这里插入图片描述
这是因为没有进入到具体某个项目环境,这时只需要再路径后面加上/项目名即可打开指定项目,例如
在这里插入图片描述
这时回车后,会进入到该项目的路由配置的’’/’'页面中。
over

Logo

前往低代码交流专区

更多推荐