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異步請求數注意事項。