注意，这里使用的 vue-cli 的版本为 2.8.2，不同版本的 vue-cli 可能会有些许不一样。
一、配置多页面 项目开发目录：需要注意一点，每个页面的文件夹命名、文件夹里面的入口 js 文件名及 hmtl 模板文件名应该一致，这样就可以使用一个函数来自动配置入口文件，而不必手动配置
project/ ├──build/ ├──config/ ├──node_modules/ ├──src/ │ ├──assets/ │ ├──components/ │ ├──html/ │ │ ├──pageOne/ │ │ │ ├──components/ │ │ │ ├──route/ // 如果有使用 vue-route │ │ │ ├──store/ // 如果有使用 vueX │ │ │ ├──style/ │ │ │ ├──APP.vue │ │ │ ├──pageOne.html │ │ │ ├──pageOne.js │ │ ├──pageTwo/ │ │ │ ├──components/ │ │ │ ├──route/ │ │ │ ├──store/ │ │ │ ├──style/ │ │ │ ├──APP.vue │ │ │ ├──pageTwo.html │ │ │ ├──pageTwo.js │ ├──utils/ ├──static/ ├──babelrcc ├──.editorconfig ├──.gitgnore ├──package.json ├──README.md 项目打包目录 dist ├──html/ │ ├──pageOne.html │ ├──pageTwo.html ├──static/ │ ├──img/ │ ├──fonts/ │ ├──css/ │ │ ├──html/ │ │ │ ├──pageOne.css │ │ │ ├──pageTwo.css │ │ ├──other.css │ ├──js/ │ │ ├──html/ │ │ │ ├──pageOne.js │ │ │ ├──pageTwo.js │ │ ├──manifest.js │ │ ├──vendor.js ├──favicon.ico 1. 添加入口工具函数// build/utils.js var glob = require('glob'); exports.getEntries = function (globPath) { var entries = {} /** * 读取src目录,并进行路径裁剪 */ glob.sync(globPath).forEach(function (entry) { /** * path.basename 提取出用 ‘/' 隔开的path的最后一部分，除第一个参数外其余是需要过滤的字符串 * path.extname 获取文件后缀 */ var basename = path.basename(entry, path.extname(entry)) // 过滤router.js // ***************begin*************** // 当然， 你也可以加上模块名称, 即输出如下： { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' } // 最终编译输出的文件也在module目录下， 访问路径需要时 localhost:8080/module/index.html // slice 从已有的数组中返回选定的元素, -3 倒序选择，即选择最后三个 var tmp = entry.split('http://www.likecs.com/').splice(-3) if(basename!==tmp[1]) return; //过滤其他js文件 var pathname = tmp.splice(0, 1) + 'http://www.likecs.com/' + basename; // splice(0, 1)取tmp数组中第一个元素 entries[pathname] = ['babel-polyfill',entry] }); return entries; } /* 变量值 entry： ../src/html/index/index.js basename: index tmp: [ 'html', 'index', 'index.js' ] pathname: html/index enteries: { 'html/index': '../src/html/index/index.js', 'html/first': '../src/html/first/first.js' } */