配置多页面的兑现格局

 联系我们     |      2019-12-16 19:12

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>
  <div id="rule"></div>
  <!-- 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 = 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'卡塔尔(英语:State of Qatar)表示编写翻译后再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官方提供的命令行工具vue-cli,能够急迅搭建单页应用。默许叁个页面入口index.html,...

上一篇:没有了 下一篇:tensorflow实例讲解