Vue构建的大多是SPA单页面应用,但有时候在实际项目中单页面应用并不一定符合业务需求
准备工作
利用vue-cli新建项目,再执行npm install命令安装所需依赖,之后需安装新依赖glob
npm install --save-dev glob
修改webpack配置
需要改动的文件都在build文件夹下:
- util.js
- webpack.base.conf.js
- webpack.dev.conf.js
- webpack.prod.conf.js
utils.js 文件
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号
// 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
const glob = require('glob');
// 页面模版文件路径
const page_path = path.join(__dirname, '../src/module');
// 页面模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 融合相应的配置
const merge = require('webpack-merge');
// 多页面入口文件配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口文件之一
exports.entry = _ => {
var entryFiles = glob.sync(page_path + '/*/*.js');
var map = {};
entryFiles.map(filePath => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
map[filename] = filePath;
});
return map;
}
// 多页面输出配置
// 与上面的多页面入口文件配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.HtmlWebpackPlugin = _ => {
var entryFiles = glob.sync(page_path + '/*/*.html');
var arr = [];
entryFiles.map(filePath => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
let config = {
// 模板来源
template: filePath,
// 文件名称
filename: filename + '.html',
inject: true,
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename]
}
// 生产环境加入新配置,该配置是原webpack.prod.conf.js中相对于webpack.dev.conf.js新增配置
if (process.env.NODE_ENV === 'production') {
config = merge(config, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(config));
});
return arr;
}
webpack.base.conf.js 文件
原:
entry: {
app: './src/main.js'
},
替换成
entry: utils.entry(),
webpack.dev.conf.js 文件
注释掉:
plugins: [
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
]
并在
plugins: [].concat(utils.HtmlWebpackPlugin())
webpack.prod.conf.js 文件
同上注释掉:
plugins: [
// new HtmlWebpackPlugin({
// filename: config.build.index,
// template: 'index.html',
// 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'
// }),
]
并在
plugins: [].concat(utils.HtmlWebpackPlugin())
至此，webpack的配置就结束了。
文件结构
.
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json
├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── Hello.vue
│ │ └── cell.vue
│ └── module
│ ├── cell
│ │ ├── cell.html
│ │ ├── cell.js
│ │ └── cell.vue
│ └── index
│ ├── index.html
│ ├── index.js
│ ├── index.vue
│ └── router
│ └── index.js
└── static
src为默认工程文件,其中的assets,components,module分别是静态资源文件、组件文件、页面文件。
页面文件中按照项目的模块分的文件夹,每个文件夹下分别有三个内容：vue文件，js文件和html文件。这三个文件的作用就相当于做spa单页面应用时，根目录的index.html页面模板，src文件下的main.js和app.vue的功能。
现在可以直接运行npm start试试看效果
相关代码：
参考地址: