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的配置便可實現多頁入口。

好比說，個人頁面結構是

webpack
    |---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