vue-cli創(chuàng)建的項目,配置多頁面的實現方法
更新時間：2018年03月15日 10:36:46 作者：cookysurongbin
下面小編就為大家分享一篇vue-cli創(chuàng)建的項目,配置多頁面的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue官方提供的命令行工具vue-cli，能夠快速搭建單頁應用。默認一個頁面入口index.html，那么，如果我們需要多頁面該如何配置，實際上也不復雜
假設要新建的頁面是rule，以下以rule為例
創(chuàng)建新的html頁面
<!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']
}),
以上全部
當后臺地址跳轉到你的新建的頁面后，由于現在配置的默認路由是公用的，可自己配置多個路由文件，分別引用。
可在Rule.vue中路由跳轉到指定路由，以實現頁面控制
mounted: function() {
this.$router.replace({
path:'/rule'
});
},
以上這篇vue-cli創(chuàng)建的項目,配置多頁面的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了vue自動檢測手機端響應式布局,可以通過結合 CSS 媒體查詢、Vue 的動態(tài)數據綁定、適當的第三方庫、PostCSS 插件以及正確的視口設置實現,感興趣的可以了解一下2024-07-07
vue組件數據傳遞、父子組件數據獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數據傳遞、父子組件數據獲取，slot,router路由功能,結合實例形式分析了vue.js組件數據傳遞、路由相關概念、原理及相關操作技巧,需要的朋友可以參考下2019-03-03
Vue3解決ElementPlus自動導入時ElMessage無法顯示的問題
這篇文章主要介紹了Vue3解決ElementPlus自動導入時ElMessage無法顯示的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue實現表格分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數,下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-07-07
為了進一步讓大家了解Vue.js的神奇魅力，了解Vue.js的一種以數據為驅動的理念，本文主要利用Vue實現了一個數字拼圖游戲，其原理并不是很復雜，下面跟著小編一起來學習學習。2016-08-08
這篇文章主要介紹了vue項目中調用百度地圖API使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Vue3帶來了許多性能優(yōu)化和效率提升的特性，本文將重點討論Vue3在靜態(tài)提升、預字符串化、緩存事件處理函數、Block?Tree和PatchFlag方面的改進，我們將通過對比Vue2和Vue3的編譯結果來說明這些方面的效率提升2023-12-12
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細使用,本文將從四個方面對Vue-DPlayer進行詳細的闡述,感興趣的朋友一起看看吧2023-10-10
最近在vue.js項目發(fā)布后發(fā)現了一個關于路徑的問題，發(fā)現網上關于這個的資料較少，所以給大家總結下，下面這篇文章主要給大家介紹了如何解決關于vue.js發(fā)布后路徑引用的問題，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08