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 } } //获取所有入口文件 function getEntry(globPath) { var entries = {}, basename; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); entries[basename] = entry; }); return entries; }

这样就配置完了index.js了。

然后是配置webpack.base.conf.js

var path = require('path') var glob = require('glob') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') var entries = getEntry('./src/pages/**/*.js') function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: entries, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules') ], alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components') } }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }] } } //获取入口js文件 function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); pathname = basename.split("_")[0]; entries[pathname] = entry; }); return entries; }

这个文件主要是配置entry: entries入口js。具体就不多说了，剩下的两个配置文件类似。我直接复制代码了。

webpack.dev.conf.js文件的配置

var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') var glob = require('glob') var path = require('path') Object.keys(baseWebpackConfig.entry).forEach(function(name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) module.exports = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, devtool: '#cheap-module-eval-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new FriendlyErrorsPlugin(), ] }) function getEntry(globPath) { var entries = {}, basename; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); entries[basename] = entry; }); return entries; } var pages = getEntry('src/pages/**/*.html'); for (var pathname in pages) { // 配置生成的html文件，定义路径等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路径 inject: true, // js插入位置 chunks: [pathname] }; module.exports.plugins.push(new HtmlWebpackPlugin(conf)); }

webpack.prod.conf.js文件的配置

var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') var HtmlWebpackPlugin = require('html-webpack-plugin') var ExtractTextPlugin = require('extract-text-webpack-plugin') var env = config.build.env var plugins = [ new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurrenceOrderPlugin(), new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), ] function getEntry(globPath) { var entries = {}, basename; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); entries[basename] = entry; }); return entries; } var pages = getEntry('src/pages/**/*.html'); for (var pathname in pages) { var conf = { filename: process.env.NODE_ENV === 'testing' ? pathname + '.html' : config.build[pathname], template: pages[pathname], inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunks: [pathname] } plugins.push(new HtmlWebpackPlugin(conf)); } var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, plugins: plugins }) if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(newCompressionWebpackPlugin({asset:'[path].gz[query]',algorithm:'gzip',test:newRegExp('\\.('+ config.build.productionGzipExtensions.join('|')+')$'),threshold:10240,minRatio:0.8}))}if(config.build.bundleAnalyzerReport){varBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(newBundleAnalyzerPlugin())}module.exports = webpackConfig

好了，所有配置文件写完。

还有最后一步就是修改项目目录结构。

在src目录下新建一个page目录，然后建一个index目录用来放index.html、Index.vue、index_main.js三个文件。

如果有多个页面，就类似添加一个video目录存放三个文件，每个文件的书写方式。按照index文件书写方式一样。

index.html文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="http://cdn.bunny-tech.com/promotion/static/act-imags/icon.png" /> <title>映兔视频</title> </head> <body> <div id="app"></div> </body> </html>

Index.vue文件

<template> <div class="warp"> <p>index</p> <hello></hello> </div> </template> <script> import main from '../../lib/main' import Hello from '../../components/Hello' import store from '../../lib/store' export default { name: 'index', components: { 'hello': Hello }, data() { return { bannerHref: '', } }, mounted() { this.loadData(); }, methods: { loadData() { var rep = { bannerPosition: 'hasActive' } store.getinfo(rep, function(res) { if (res.errorCode == 0) { console.log(res.data); } }) } } } </script> <style scoped> .warp { max-width: 750px; margin: 0 auto; background: #CCC; } </style>

index_main.js文件

import Vue from 'vue' import App from './Index' import Resource from 'vue-resource' Vue.use(Resource); new Vue({ el: '#app', template: '<App/>', components: { App } })

ok了，记得删除主目录下的index.html文件哦，因为那个已经被我们移到page目录下面了。以后就安心写业务代码吧。不需要管配置的问题了。上面文件里关于vue-resource的代码，在写demo的时候都可以去掉，那是关于vue异步请求数据的，这个例子用不到。如果喜欢下次写一点关于vue异步请求数注意事项。