这次给大家带来如何使用vue配置多页面，使用vue配置多页面的注意事项有哪些，下面就是实战案例，一起来看一下。
1.安装环境
①安装node.js 并添加入环境变量path
②安装淘宝npm镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
③安装webpack
npm install webpack -g
④安装vue-cli脚手架
npm install -g vue-cli
⑤创建项目模板 vue init wepack vue-multipage-demo
⑥cmd进入到要放项目的文件夹
⑦安装 cnpm install
2.目录结构调整
3.配置文件修改
①添加依赖 glob （返回目录中的所有子文件）
npm install glob
②修改build文件夹中的utils.js文件
//新增代码
var glob = require('glob');
// 页面模板
var htmlwebpackplugin = require('html-webpack-plugin');
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var page_path = path.resolve(dirname, '../src/pages');
// 用于做相应的merge处理
var merge = require('webpack-merge');
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
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
}
//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlplugin = function () {
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',
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
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
}
③修改webpack.base.conf.js文件
function resolve (dir) {
return path.join(dirname, '..', dir)
}
const createlintingrule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitwarning: !config.dev.showeslinterrorsinoverlay
}
})
module.exports = {
context: path.resolve(dirname, '../'),
//注释代码开始
// entry: {
// app: './src/main.js'
// },
//注释代码结束
//新增代码开始
entry: utils.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'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useeslint ? [createlintingrule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueloaderconfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetspath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetspath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetspath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setimmediate polyfill because vue
// source contains it (although only uses it if it's native).
setimmediate: false,
// prevent webpack from injecting mocks to node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
④修改webpack.dev.conf.js文件
plugins: [
new webpack.defineplugin({
'process.env': require('../config/dev.env')
}),
new webpack.hotmodulereplacementplugin(),
new webpack.namedmodulesplugin(), // hmr shows correct file names in console on update.
new webpack.noemitonerrorsplugin(),
// https://github.com/ampedandwired/html-webpack-plugin
//多页面输出配置
//注释代码开始
// new htmlwebpackplugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
//注释代码结束
// copy custom static assets
new copywebpackplugin([
{
from: path.resolve(dirname, '../static'),
to: config.dev.assetssubdirectory,
ignore: ['.*']
}
])
//新增代码开始
].concat(utils.htmlplugin())
//新增代码结束
})
⑤修改webpack.prod.conf.js文件
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const basewebpackconfig = require('./webpack.base.conf')
const copywebpackplugin = require('copy-webpack-plugin')
const htmlwebpackplugin = require('html-webpack-plugin')
const extracttextplugin = require('extract-text-webpack-plugin')
const optimizecssplugin = require('optimize-css-assets-webpack-plugin')
const uglifyjsplugin = require('uglifyjs-webpack-plugin')
const env = process.env.node_env === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
const webpackconfig = merge(basewebpackconfig, {
module: {
rules: utils.styleloaders({
sourcemap: config.build.productionsourcemap,
extract: true,
usepostcss: true
})
},
devtool: config.build.productionsourcemap ? config.build.devtool : false,
output: {
path: config.build.assetsroot,
filename: utils.assetspath('js/[name].[chunkhash].js'),
chunkfilename: utils.assetspath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.defineplugin({
'process.env': env
}),
new uglifyjsplugin({
uglifyoptions: {
compress: {
warnings: false
}
},
sourcemap: config.build.productionsourcemap,
parallel: true
}),
// extract css into its own file
new extracttextplugin({
filename: utils.assetspath('css/[name].[contenthash].css'),
// setting the following option to `false` will not extract css from codesplit chunks.
// their css will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// it's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allchunks: true,
}),
// compress extracted css. we are using this plugin so that possible
// duplicated css from different components can be deduped.
new optimizecssplugin({
cssprocessoroptions: config.build.productionsourcemap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
//注释代码开始
// 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'
// }),
//注释代码结束
// keep module.id stable when vendor modules does not change
new webpack.hashedmoduleidsplugin(),
// enable scope hoisting
new webpack.optimize.moduleconcatenationplugin(),
// split vendor js into its own file
new webpack.optimize.commonschunkplugin({
name: 'vendor',
minchunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexof(
path.join(dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.commonschunkplugin({
name: 'manifest',
minchunks: infinity
}),
// this instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.commonschunkplugin({
name: 'app',
async: 'vendor-async',
children: true,
minchunks: 3
}),
// copy custom static assets
new copywebpackplugin([
{
from: path.resolve(dirname, '../static'),
to: config.build.assetssubdirectory,
ignore: ['.*']
}
])
//修改代码开始
].concat(utils.htmlplugin())
//修改代码结束
})
if (config.build.productiongzip) {
const compressionwebpackplugin = require('compression-webpack-plugin')
webpackconfig.plugins.push(
new compressionwebpackplugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new regexp(
'\\.(' +
config.build.productiongzipextensions.join('|') +
')$'
),
threshold: 10240,
minratio: 0.8
})
)
}
if (config.build.bundleanalyzerreport) {
const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin
webpackconfig.plugins.push(new bundleanalyzerplugin())
}
module.exports = webpackconfig
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何进行angular网络请求封装
如何实现vue input输入框模糊查询
以上就是如何使用vue配置多页面的详细内容。