vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用。默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂
假设要新建的页面是rule,以下以rule为例
创建新的html页面
创建入口文件Rule.vue和rule.js,仿照App.vue和main.js
export default {
name: 'lottery',
data() {
return {
}
},
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
}
body{
margin:0;
padding:0;
}
rule.js
import Vue from 'vue'
import Rule from './Rule.vue'
import router from './router'
import $ from 'jquery'
//import vConsole from 'vconsole'
import fastclick from 'fastclick'
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#rule',
router,
template: '',
components: { Rule },
})
修改config/index.js
build添加rule地址,即编译后生成的rule.html的地址和名字
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.php'),
rule: path.resolve(__dirname, '../dist/rule.php'),
……
}
rule: path.resolve(__dirname, '../dist/rule.php')表示编译后再dist文件下,rule.html编译后文件名为rule.php
修改build/webpack.base.conf.js
配置entry
entry: {
app: './src/main.js',
rule: './src/rule.js'
},
修改build/webpack.dev.conf.js
在plugins增加
new HtmlWebpackPlugin({
filename: 'rule.html',
template: 'rule.html',
inject: true,
chunks:['rule']
}),
修改build/webpack.prod.conf.js
在plugins增加
new HtmlWebpackPlugin({
filename: config.build.rule,
template: 'rule.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',
chunks: ['manifest','vendor','rule']
}),
以上全部
当后台地址跳转到你的新建的页面后,由于现在配置的默认路由是公用的,可自己配置多个路由文件,分别引用。
可在Rule.vue中路由跳转到指定路由,以实现页面控制
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
以上这篇vue-cli创建的项目,配置多页面的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法相关推荐
- create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined
create-react-app创建的项目配置多入口MPA模式.报Cannot read property 'filter' of undefined 多入口配置 一.首先eject项目 执行npx ...
- IDEA创建JavaWeb项目配置
IDEA创建JavaWeb项目配置 1. 工具准备 2. 创建JavaWeb项目 3. 配置 4. 选择Java Web 4.配置项目名和位置 5. Finish创建完成,目录结构 6. 快捷键shi ...
- Idean2018版本创建Gradle项目配置Tomcat报404错误(The origin server did not find a current representation for the)
一.在IntelliJ IDEA2018版本创建Gradle项目配置Tomcat报404错误 二.解决方案:红框部分,在外部存储生产的项目文件的勾一定不要勾选. 只要勾选就是404 然后问题就解决了.
- vue 跳添加编辑页面传两个值_vuecli3开发多页面项目
本文探讨下vue-cli3开发多页面项目的简单构建,先分析下使用场景,举个栗子:公司做后台管理系统,涉及到前端展示和后端管理两个部分.这种情况,当然可以在一个项目里开发,但是我们希望分开来方面单独管理 ...
- spark java pom.xml_使用maven方式创建spark项目(配置pom.xml文件)
创建maven项目后,在pom.xml文件中添加如下配置项: 1.8 1.8 2.10.5 1.6.2 2.6.4 UTF-8 org.apache.spark spark-core_2.11 ${s ...
- 解决Maven创建java项目缺少resources文件夹的方法
开发工具与关键技术:Java.Eclipse 作者:吴晓佩 撰写时间:2020年04月28日 使用maven创建的java项目,我发现我创建的项目中缺少resources的文件夹,一开始我以为直接创建 ...
- vue 浏览器调试 样式如何定位样式_Vue项目骨架屏注入实践和方法总结
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- vue项目配置nginx页面跳转正常,接口报200,但是没数据(很抱歉,如果没有启用JavaScript,XXX无法正常工作)
一.描述下问题:nginx代理跳转页面都可以进去,接口返回报200,但是就是没数据,response返回(We're sorry but XXX doesn't work properly witho ...
- 关于创建MFC项目发生当前页面脚本发生错误(691)的问题解决
如图错误: 解决方案: 复制URL,打开,找到如图所示几行,全部注释. 这个错误网上找了大把,没看到,困扰我好久了,现在终于解决了.
最新文章
- oralce rollup 小计合计_总计与小计–WITH ROLLUP
- 自动驾驶多相机与多雷达数据融合方法汇总
- HTML5与CSS3基础(二)
- SQLite 版本引发的 Python 程序调用问题
- 天马行空W:在C++中调用DLL中的函数
- 【NLP】看不懂bert没关系,用起来so easy!
- zuul默认的路由规则及禁用路由规则
- CSS3中display属性的Flex布局
- MySQL优化四(优化表结构)
- 关于游戏运营策划管理相关必备知识
- 佳能dpp4中文版 附使用教程
- Citrix虚拟桌面高拍仪上传图片调优方法
- graphpad如何换柱状图与折线图能否混合一起_Graphpad Prism 绘制柱状图与散点图共存图...
- 使用DBUtils报错connot create bean 错误解决的办法
- (给3d人物模型添加原始动画文件 针对3d模型有动画文件 没有Avatar 没有Animator Controller)
- 百度富文本编辑器修改图片上传尺寸
- 子域名在线查询网站推荐
- 眼见不一定为实!18个神奇的视错觉,看完不相信眼睛系列
- 学习ARM开发(11)
- myet: 练习英语口语不错
热门文章
- Myeclipse 10.5 下载地址
- 回滚 - 每天5分钟玩转 Docker 容器技术(141)
- 简单看看PageHelper的配置
- Win10系列:JavaScript综合实例2
- 【图像识别】图像识别过程中,计算的图片大小多少为合适?
- EchoesWorks —— 打造下一代技术Blog/Presentation 框架(招兵买马)
- CLLocationCoordinate2D 用法 和一个最隐蔽的错误
- Trunc(dtpPurDate.DateTime)可以将时间取到天。
- origin9语言设置中文_英雄联盟手游怎么设置繁体 LOL手游繁中设置方法?_英雄联盟手游...
- mysql 挂掉 无法启动_mysql-配置 - MySQL错误,时不时自动挂掉,无法启动