vue-cli3 配置多页

本文记录了在Vue CLI3中配置多页应用的过程,包括在src/pages下创建页面文件夹,设置app.js和app.vue,修改HTML模板的title,安装glob依赖,以及编写vue.config.js配置文件来定义各页面的入口、模板和title。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在网上看了很多例子,但是自己试总不成功,终于在github 中 下了一个可用,然后自己测试了下,可用,这里做个笔记

1、在src 下新建pages目录,pages下具体的页面建具体的文件夹,然后添加app.js 和app.vue,这里app.js 等效于单页框架下的入口文件main.js,组件 app.vue 等效于单页下的app.vue,vue通过入口文件解析app.vue 并替换模板文件index.html

编写title

修改模板页的title,添加<%= htmlWebpackPlugin.options.title %>

安装glob依赖

编写配置文件 vue.config.js

添加

const titles = require('./title.js')

const glob = require('glob')

const pages = {}

 

glob.sync('./src/pages/**/app.js').forEach(path => {

console.log(path);

const chunk = path.split('./src/pages/')[1].split('/app.js')[0];

console.log(chunk);

pages[chunk] = {

entry: path,

template: 'public/index.html',

title: titles[chunk],

chunks: ['chunk-vendors', 'chunk-common', chunk]

}

})

models中添加pages

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值