首頁 > 開發者 > JavaScript
vue-cli建立的項目,配置多頁面的實現方法，vue-cli建立
vue官方提供的命令列工具vue-cli，能夠快速搭建單頁應用。預設一個頁面入口index.html，那麼，如果我們需要多頁面該如何配置，實際上也不複雜
假設要建立的頁面是rule，以下以rule為例
建立新的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>
建立入口檔案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 = falsefastclick.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建立的項目,配置多頁面的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
