vue项目中多个入口的配置

出处：http://www.qingpingshan.com/jb/javascript/221105.html

基于vue2.0生成项目，一段时间都在找如何配置成多个页面的。网上有这样的例子相对也是比较详细的，但是还是有些许不一样的地方的。所以，我还是记录下来，当然我也是参考了网上的资料的。

当然先来个vue的项目，打开命令行工具，对边进入一个目录下。

vue init webpack my-project

注意，node和npm的版本，npm版本最好是3.0+的。其中my-project是自定义的项目名，按照步骤一步一步来就好了，然后进入自动生成的文件夹下，下载依赖的包，然后运行，应该会打开浏览器的localhost:8080。

npm install  
npm run dev

如果不出意外是能够打开页面的。

然后你就可以在项目的基础上开心的写组件了，那么我们应该怎么修改vue的配置，让我们的项目是多个页面的呢。

第一步

在index.html同级目录下新增一个页面，welcome.html，然后在src目录下，添加Welcome.vue和welcom_main.js。

第二步修改配置，配置项有4个文件：

build//文件夹下
webpack.base.conf.js
webpack.dev.conf.js
webpack.pro.conf.js
config文件夹下
index.js

其中所有的配置，有index的地方，都需要在复制一份。

比如index.js中:

build:{
  play:path.resolve(__dirname, '../dist/welcome.html'), //新增的配置
}

webpack.base.conf.js中

entry:{
  welcome: './src/welcome_main.js', //新增的配置
}

其他配置文件里的改动都类似。复制粘贴，然后改吧改吧就好了。

配置完后，运行下 npm run dev

不过这种方式的多页面配置，每次新加一个页面，必须重新配置一次，比较麻烦，如果页面不多，倒也是可行的，但是如果随着项目越来越多，到时候项目目录就很不简洁了。

所以，还有一种一劳永逸的方式。原理其实一样的，不过是文件的配置让文件自动生成。

项目生成方式还是一样，接下来的配置有点不同。

第一步：安装一个包glob 很重要的包

npm install  glob --save-dev

第二步配置config下面的index.js文件

var path = require('path')
var glob = require('glob')

var build = {
  env: require('./prod.env'),
  //index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
}

//根据getEntry获取所有入口主页面
var pages = getEntry('src/pages/**/*.html');

//每个入口页面生成一个入口添加到build中
for (var pathname in pages) {
  build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

module.exports = {
  build: build,//生成的配置build
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: false,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }

转载于:https://www.cnblogs.com/MonaSong/p/6645026.html