下面我就为大家分享一篇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'

});

},

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：