vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法
vue官方提供的命令行工具vue-cli，能夠快速搭建單頁(yè)應(yīng)用。默認(rèn)一個(gè)頁(yè)面入口index.html，那么，如果我們需要多頁(yè)面該如何配置，實(shí)際上也不復(fù)雜
假設(shè)要新建的頁(yè)面是rule，以下以rule為例
創(chuàng)建新的html頁(yè)面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title></title> </head> <body> <span style="color:#000000;"><div id="rule"></div></span> <!-- built files will be auto injected --> </body> </html>
創(chuàng)建入口文件Rule.vue和rule.js，仿照App.vue和main.js
<template>
<div id="rule">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'lottery',
data() {
return {
}
},
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
}
</script>
<style lang="less">
body{
margin:0;
padding:0;
}
</style>
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: '<Rule/>',
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']
}),
以上全部
當(dāng)后臺(tái)地址跳轉(zhuǎn)到你的新建的頁(yè)面后，由于現(xiàn)在配置的默認(rèn)路由是公用的，可自己配置多個(gè)路由文件，分別引用。
可在Rule.vue中路由跳轉(zhuǎn)到指定路由，以實(shí)現(xiàn)頁(yè)面控制
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
以上這篇vue-cli創(chuàng)建的項(xiàng)目,配置多頁(yè)面的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局的五種實(shí)現(xiàn)
本文主要介紹了vue自動(dòng)檢測(cè)手機(jī)端響應(yīng)式布局,可以通過結(jié)合 CSS 媒體查詢、Vue 的動(dòng)態(tài)數(shù)據(jù)綁定、適當(dāng)?shù)牡谌綆?kù)、PostCSS 插件以及正確的視口設(shè)置實(shí)現(xiàn),感興趣的可以了解一下2024-07-07
vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實(shí)例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題
這篇文章主要介紹了Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-07-07
基于Vue.js實(shí)現(xiàn)數(shù)字拼圖游戲
為了進(jìn)一步讓大家了解Vue.js的神奇魅力，了解Vue.js的一種以數(shù)據(jù)為驅(qū)動(dòng)的理念，本文主要利用Vue實(shí)現(xiàn)了一個(gè)數(shù)字拼圖游戲，其原理并不是很復(fù)雜，下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)。2016-08-08
詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3帶來了許多性能優(yōu)化和效率提升的特性，本文將重點(diǎn)討論Vue3在靜態(tài)提升、預(yù)字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進(jìn)，我們將通過對(duì)比Vue2和Vue3的編譯結(jié)果來說明這些方面的效率提升2023-12-12
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細(xì)使用,本文將從四個(gè)方面對(duì)Vue-DPlayer進(jìn)行詳細(xì)的闡述,感興趣的朋友一起看看吧2023-10-10
關(guān)于vue.js發(fā)布后路徑引用的問題解決
最近在vue.js項(xiàng)目發(fā)布后發(fā)現(xiàn)了一個(gè)關(guān)于路徑的問題，發(fā)現(xiàn)網(wǎng)上關(guān)于這個(gè)的資料較少，所以給大家總結(jié)下，下面這篇文章主要給大家介紹了如何解決關(guān)于vue.js發(fā)布后路徑引用的問題，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08