时间:2021-05-26
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的。如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法。
如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程。
一、创建单页面 vue.js 项目
这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请参考「vue-cli3.0 升级记录」
二、多页面配置
1、添加配置文件
在项目根路径下( 与 package.json 同目录 )添加 vue.config.js,内容如下:
module.exports = { pages: { index: { // 入口js的路径 entry: './src/main', // 页面模板路径 template: './src/public/index.html' } } }上面的配置其实就是 vue-cli 建立项目的默认配置,如果增加页面,在 pages 节点下添加配置即可。但这种方式,每次增加一个新页面,就需要手动添加节点,这种重复的事情显然不智能。下面继续改造。
2、调整项目结构
要自动化,那么就需要按定一种规则把页面组织下。如把所有路由页面都放到 src/pages 目录下,改造后的结构如下:
3、编写自动配置文件
在项目根路径下( 与 package.json 同目录 )添加 vue.util.js,内容如下:
在 vue.config.js 使用上面的配置
const utils = require('./vue.util') module.exports = { pages: utils.pages() }三、测试下
yarn dev
浏览器输入:
http://localhost:8080/index.html 和 http://localhost:8080/index2.html
OK,多页面配置完成
总结
以上所述是小编给大家介绍的vue.js多页面开发环境搭建过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue.js开发环境搭建教程分享,具体内容如下1、安装node.js,忽略2、基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:npmins
项目简介基于vue.js的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用ESNext、scss等最新语言特性。项目包含:基础库:vue.js、v
Vue.js卓越发展的前端技术框架。近些年,相继涌现了令人欣喜的前端开发框架Angular.js、React.js和Vue.js。而Vue.js是一个JavaS
脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具。vue-cli是vue.js的脚手架,用于快速自动生成vue.js+webpack的项目模板,这样
VueCLI介绍VueCLI是一个基于Vue.js进行快速开发的完整系统,提供:通过@vue/cli搭建交互式的项目脚手架。通过@vue/cli+@vue/cl