详解vue-cli多页面工程实践第1/2页
更新时间：2017年08月30日 09:42:00 作者：水木酱
本篇文章主要介绍了详解vue-cli多页面工程实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了vue-cli多页面工程实践，分享给大家，具体如下：
src目录结构
因为是自定义的设置，src下的目录结构需要固定，约定大于配置嘛。
src目录结构：
src/
components/
modules/ # 多页面
index/ # index 单页面
index.html
main.js # 入口文件
page1/
index.html
main.js
group/
page2/
index.html
main.js
build中的配置
utils.js 增加:
// match files
let glob = require('glob');
/**
* globPath 获取泛路径下的特定文件
*/
exports.getEntities = function (path) {
let entities = {};
glob.sync(path).forEach(function (entity) {
let moduleName = entity.split('/').slice(-2,-1);
entities[moduleName] = entity
});
// eg: { main: './src/module/index/main.js', test: './src/module/group/test/main.js' }
return entities;
};
webpack.base.conf.js 修改输入和输出:
module.exports = {
// 遍历获取入口文件
entry: utils.getEntities("./src/modules/**/main.js"),
...
plugins:[]
};
/***
* 生成 <module>/index.html
*/
let utils = require('./utils')
let pages = utils.getEntities("./src/modules/**/index.html");
for (let page in pages) {
let filename = "index.html";
if(page!=='index'){
filename = page+"/index.html";
}
module.exports.plugins.push(new HtmlWebpackPlugin({
filename: filename,
template: pages
相关文章
这篇文章主要介绍了Vue动态控制input的disabled属性的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue3的介绍和两种创建方式(cli和vite),vue3对比vue2带来的性能提升有很多优势，总体来说Vue 3在性能、开发体验和代码组织方面都有所改进，使得它更加适合于大型、复杂的应用程序开发，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-10-10
这篇文章主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue.js递归组件实现组织架构树和选人功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了详解Vue 多级组件透传新方法provide/inject，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue项目引进ElementUI组件的方法，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
这篇文章主要为大家详细介绍了vue实现拖拽窗口功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue 跳转页面$router.resolve和$router.push案例详解
这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下2023-10-10
最新评论