vue webpack多页面构建的实例代码第1/3页

# 下载依赖
npm install
# 运行
npm run dev
http://localhost:3000/login.html
http://localhost:3000/index.html

vue init webpack webpack-multipage // 创建项目
cd webpack-multipage // 进入webpack-multipage目录
npm install // 下载依赖
npm run dev // 运行

|-- src
 |-- assets
 |-- components
 |-- entry
  |-- index // index模块
   |-- components
    |-- Hello.vue
   |-- router
    |-- index.js
   |-- index.html
   |-- index.js
   |-- index.vue
  |-- login // login模块
   |-- login.html
   |-- login.js
   |-- login.vue

# 先下载glob组件
npm install glob -D

var glob = require('glob');
exports.getEntries = function (globPath) {
 var entries = {}
 glob.sync(globPath).forEach(function (entry) {
 var basename = path.basename(entry, path.extname(entry), 'router.js');
 entries[basename] = entry
 });
 return entries;
}

module.exports = {
 entry: utils.getEntries('./src/entry/*/*.js'),
 ...
}

...
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),
...

var pages = utils.getEntries('./src/entry/*/*.html')
for(var page in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: page + '.html',
 template: pages
                            
123下一页阅读全文
                            

                                您可能感兴趣的文章:
浅谈如何使用webpack构建多页面应用
详解webpack4多入口、多页面项目构建案例
详解使用webpack构建多页面应用
webpack构建react多页面应用详解
使用Webpack构建多页面程序的实现步骤