vue的多页面配置

作者: 5df463a52098 | 来源:发表于2018-12-03 11:27 被阅读38次

vue多页应用
vue多页面配置
vue-cli多页面配置
vue的多页面配置
vue-cli 3.0 多页面打包 (四)
vue webpack多页面配置
vue多页面应用配置
Vue多页面应用配置
vue多页面配置步骤
vue中如何配置多页面配置

vue官方提供的命令行工具vue-cli，能够快速搭建单页应用。默认一个页面入口index.html，那么，如果我们需要多页面该如何配置。

第一种方法：

1、创建新页面other.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="other"></div>
</body>
</html>

2、创建入口文件Other.vue和other.js以及单独的router，仿照App.vue和main.js
Other.vue

<template>
  <div id="other">
    我是other
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'Other',
  mounted () {
  }
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

other.js

import Vue from 'vue'
import Other from './Other.vue'
import router from './router/other'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#other',
  router,
  components: { Other },
  template: '<Other/>'
})

router/other.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/other',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

3、修改config/index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    other: path.resolve(__dirname, '../dist/other.html'),
    ...
}

4、修改build/webpack.base.conf.js
配置entry：

entry: {
    app: './src/main.js',
    other: './src/other.js'
  },

5、修改build/webpack.dev.conf.js
在plugins添加：

new HtmlWebpackPlugin({
      filename: 'other.html',
      template: 'other.html',
      inject: true,
      chunks: ['other']
    }),

6、修改build/webpack.prod.conf.js
在plugins添加：

new HtmlWebpackPlugin({
      filename: config.build.other,
      template: 'other.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', 'other']
    }),

npm run dev启动，
浏览器打开localhost:8081/index.html#/

浏览器打开localhost:8081/other.html#/other

image.png

第二种方法：

1、修改utils.js

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
var merge = require('webpack-merge')

exports.entries = () => {
  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
  var map = {}
  entryFiles.forEach((filePath) => {
      var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
      map[filename] = filePath
  })
  return map
}

exports.htmlPlugin = () => {
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
      template: filePath,
      filename: filename + '.html',
      chunks: ['manifest', 'vendor', filename],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

2、修改webpack.base.conf.js
修改入口文件：
注释或删除下面代码

entry: {
    app: './src/index.js'
  },

改成：

 entry: utils.entries(),

3、修改webpack.dev.conf.js
注释或者删除下面代码

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

添加代码：

image.png

4、修改webapck.prod.conf.js
注释或者删除下面代码

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.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'
    }),

添加代码：