vue多页面设置

本文参考：https://blog.csdn.net/Tank_in_the_street/article/details/73732801

进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：

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

接下来就是对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：

plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    
    // HMR shows correct file names in console on update.
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'login.html',
      template: 'login.html',
      inject: true,
      chunks: ['login']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件，在build里加入这个：

index: path.resolve(__dirname, '../dist/index.html'),
login: path.resolve(__dirname, '../dist/login.html'),

然后打开/build/webpack.prod.conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：

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',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.login,
      template: 'login.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', 'login']
    }),

配置完了，接下来新建一个login.html和login.js, and login.vue
login.js可以这样写

import Vue from 'vue'
import login from './login.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#login',
  render: h => h(login)
})

login.vue

<template>
  <div id="login">
    <login></login>
  </div>
</template>

<script>
import login from './components/login'

export default {
  name: 'login',
  components: {
    login
  }
}
</script>

启动项目。。。。
，

，

，

，

，

然后，

，

，

，

，

，

失败了。。。。
报了个错：vue Uncaught RangeError: Maximum call stack size exceeded

经过一系列的查找，终于找到什么错了，原来我的两个vue文件重命了，大家都叫login.vue,改掉另外一个就可以了