适用于Vue-cli 2.x
在日常Vue项目开发中，使用vue-cli搭建项目已成为最方便快捷的方式，但是vue-cli生成的项目是单页应用，如果项目有多高html主页，那就需要改写webpack成为多页面，以下就是改写webpack的步骤
1. 在项目更目录index.html同级创建pages.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title></title>
</head>
<body>
<div id="pages"></div>
</body>
</html>
2. 在App.vue和main.js的同级创建Pages.vue和pages.js,作为入口文件，内容和App.vue和main.js基本一样，在pages.js 中引入需要的依赖
<template>
<div id="pages">
<!-- 组件容器 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'pages',
data(){
return {
}
}
}
</script>
<style lang="less">
</style>
import Vue from 'vue';
import Pages from './Pages.vue';
import Vuex from 'vuex';
import router from './h5-pages/router';
import store from './h5-pages/vuex/store';
import '../static/css/commons.css';
import '../static/js/rem';
Vue.use(Vuex);
Vue.config.productionTip = false
new Vue({
el:'#pages',
router,
store,
components: { Pages },
template: '<Pages/>'
})
3.修改config/index.js
在build中添加pages.html的路径，即编译后生成的pages.html
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
pages: path.resolve(__dirname, '../dist/pages.html'),
……
}
4.修改build/webpack.base.conf.js
在entry中添加入口js文件地址
entry: {
app: ["babel-polyfill", "./src/main.js"],
pages: ["babel-polyfill", "./src/pages.js"]
}
5.修改build/webpack.dev.conf.js
在plugins中增加以下代码
new HtmlWebpackPlugin({
filename: 'pages.html',
template: 'pages.html',
inject: true,
chunks:['pages']
})
并将之前的HtmlWebpackPlugin做增加chunks:['app']
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks:['app'] // 不加这一段的话，会将打包之后的pages.js自动引入到index.html中
})
6.修改build/webpack.prod.conf.js
在plugins中增加以下代码
new HtmlWebpackPlugin({
filename: config.build.pages,
template: 'pages.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','pages']
})
同样的，在之前的HtmlWebpackPlugin中的chunks中加入指定文件引入
new HtmlWebpackPlugin({
filename: 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'] //加入指定引入文件
})
至此，vue-cli 改写多页面配置完成，在执行npm run build之后，会在根目录生成index.html和pages.gtml,默认https://www.xxxx.com打开的是index.html，https://www.xxxx.com/pages.html则是访问的指定主页
提醒以下，在src下最好新建一个大目录，放置pages.html页面相关的组件及路由配置等文件
网友评论