基于vue-cli的多页面应用脚手架
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build 修改命名问题 Jul 27, 2018
config
src 修改路径不对bug Apr 4, 2018
static update Mar 5, 2018
.babelrc
.editorconfig update Mar 5, 2018
.gitignore 修改路径添加删除dist功能 May 15, 2018
.postcssrc.js update Mar 5, 2018
README.md 解决白屏问题 Dec 22, 2018
package.json 修改路径添加删除dist功能 May 15, 2018

README.md

vue-cli 多页面应用

因为原作者貌似不再更新这个多页面配置了,于是我自己来把这个更新了,后期要是 vue-cli 更新的话我也会同步更新的

项目迁移

原来的这个项目不再维护,因为是 fork 来的,没有 issues 功能,不利于后期维护,所以对项目做了迁移。

前言

这是用 vue-cli 2.9.3 版本vue init webpack命令生成的的应用,在此基础上加了些东西变成了多页面的

如果想看vue-cli 3.x及以上的版本请移步v3分支

tip

  1. 如果想新建页面的话需要在src/module里新建文件夹,且文件夹里必须包括一个.html 文件,.js 文件,.vue 文件作为入口文件
  2. npm run dev的时候提示打开 localhost:8080 即可
  3. 为了方便维护npm run build出来的 html 文件是放在 module 文件夹里的
  4. 如果想修改src里的module文件夹名字的话,需要将三个config.js配置文件里的getEntries函数的参数module改成你想改的名字,同时这个函数的函数体里的module也需要更改。

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080/module/index.html
npm run dev

# build for production with minification
npm run build

重要: 首页是localhost:8080/module/index.html 而不是localhost:8080

修改的地方

webpack.base.conf.js

//6行添加
const glob = require("glob");
const entry = getEntries("./src/module/**/*.js"); // 获得入口js文件

function resolve(dir) {
  return path.join(__dirname, "..", dir);
}

function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(module\/(?:.+[^.]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, "")] = entry;
    }
  });
  return entries;
}

然后将module.exports里的 entry 改为我们定义的这个 ertry

webpack.dev.conf.js

//12行添加
const glob = require("glob");
const entry = getEntries("./src/module/**/*.js"); // 获得入口js文件

function resolve(dir) {
  return path.join(__dirname, "..", dir);
}

//90行添加
for (let pathname in entry) {
  //为了在开发环境下不用再多余输入module
  let filename = pathname.replace(/module\//, ""),
    conf = {
      filename: `${filename}.html`,
      template: entry[pathname],
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: "dependency"
    };
  if (pathname in devWebpackConfig.entry) {
    conf.chunks = ["manifest", "vendor", pathname];
    conf.hash = true;
  }
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

//最后添加
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(module\/(?:.+[^.]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, "")] = entry;
    }
  });
  return entries;
}

webpack.prod.con.js

//13行添加
const glob = require("glob");
const entry = getEntries("./src/module/**/*.html"); // 获得入口hmtl文件

//在module.exports = webpackConfig前添加
for (let pathname in entry) {
  let conf = {
    filename: `${pathname}.html`,
    template: entry[pathname],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: "dependency"
  };
  if (pathname in webpackConfig.entry) {
    conf.chunks = ["manifest", "vendor", pathname];
    conf.hash = true;
  }
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
//在module.exports = webpackConfig后添加
function getEntries(path) {
  let entries = {};
  glob.sync(path).forEach(entry => {
    if (/(module\/(?:.+[^.]))/.test(entry)) {
      entries[RegExp.$1.replace(/\/\w+\b/, "")] = entry;
    }
  });
  return entries;
}

更新

2018 5.15 更新config/index.js

修改build配置项下的assetsPublicPath为'../' 解决根路径问题

2018 7.27 更新build里的三个config.js

修改正则为/(module/(?:.+[^.]),解决module重命名问题