vue-cli多页面

安装vue-cli

npm install -g vue-cli
//比如说我的项目放在d盘的project文件夹下
cd /d d:/project
vue init webpack my-project
cd my-project
npm install
npm run dev

 如果在npm install的时候遇到安装出错，可能是npm的版本过低，输入下面的代码更新npm的版本

npm install -g npm

 

多页面

在pc端，需要实现多页面开发。修改webpack的配置即可实现多页入口。

比如说，我的页面结构是

my-project
    —build
    —src
        —assets  资源  
        —components    组件
        —module     各个模块
            —index    index模块
　　　　　　　　—index.html
　　　　　　　　—index.js　　
　　　　　　　　—index.vue

            —info      info模块

　　　　　　　　—info.html
　　　　　　　　—info.js　　
　　　　　　　　—info.vue

 需要配置webpack.base.conf.js，在配置之前，在当前项目中先引入一个glob的依赖

npm install glob --save-dev

然后再更改webpack.base.conf.js文件

var glob = require('glob');
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  console.log(entries);
  return entries;
}

module.exports = {
  entry: entries,
  ***
}

 再配置webpack.dev.conf.js

var glob = require('glob');
module.exports = merge(baseWebpackConfig, {
  devtool: '#eval-source-map',
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
})

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  console.log(entries);
  return entries;
}

var pages = getEntry('./src/module/**/*.html');

for (var pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    inject: true              // js插入位置
  };
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

最后，修改webpack.prod.conf.js

var glob = require('glob');
module.exports = merge(baseWebpackConfig, {
  ***
  plugins: [
    ***
    new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin(path.join(config.build.assetsSubDirectory, '[name].[contenthash].css'))
  ]
})

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  console.log(entries);
  return entries;
}

var pages = getEntry('./src/module/**/*.html');

for (var pathname in pages) {
  console.log(pathname);
  // 配置生成的html文件，定义路径等
  var conf = {
    // filename: pathname + '.html',
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    inject: true              // js插入位置
  };
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

如果还有什么问题，可以查看我在github上的项目

项目地址：

https://github.com/yaoyao1987/vue-cli-multipage

 

 

参考网址：

http://www.jianshu.com/p/f8e21d87a572