vue的多页面配置
2018-12-03 本文已影响38人
5df463a52098
vue官方提供的命令行工具vue-cli，能够快速搭建单页应用。默认一个页面入口index.html，那么，如果我们需要多页面该如何配置。
第一种方法：
1、创建新页面other.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="other"></div>
</body>
</html>
2、创建入口文件Other.vue和other.js以及单独的router，仿照App.vue和main.js
Other.vue
<template>
<div id="other">
我是other
<router-view/>
</div>
</template>
<script>
export default {
name: 'Other',
mounted () {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
other.js
import Vue from 'vue'
import Other from './Other.vue'
import router from './router/other'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#other',
router,
components: { Other },
template: '<Other/>'
})
router/other.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/other',
name: 'HelloWorld',
component: HelloWorld
}
]
})
3、修改config/index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
other: path.resolve(__dirname, '../dist/other.html'),
...
}
4、修改build/webpack.base.conf.js
配置entry：
entry: {
app: './src/main.js',
other: './src/other.js'
},
5、修改build/webpack.dev.conf.js
在plugins添加：
new HtmlWebpackPlugin({
filename: 'other.html',
template: 'other.html',
inject: true,
chunks: ['other']
}),
6、修改build/webpack.prod.conf.js
在plugins添加：
new HtmlWebpackPlugin({
filename: config.build.other,
template: 'other.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', 'other']
}),
npm run dev启动，
浏览器打开localhost:8081/index.html#/
浏览器打开localhost:8081/other.html#/other
image.png
第二种方法：
1、修改utils.js
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
var merge = require('webpack-merge')
exports.entries = () => {
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
}
exports.htmlPlugin = () => {
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',
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
}
2、修改webpack.base.conf.js
修改入口文件：
注释或删除下面代码
entry: {
app: './src/index.js'
},
改成：
entry: utils.entries(),
3、修改webpack.dev.conf.js
注释或者删除下面代码
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
添加代码：
image.png
4、修改webapck.prod.conf.js
注释或者删除下面代码
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'
}),
添加代码：
image.png
5、目录结构
image.png
npm run dev启动项目，浏览器打开http://localhost:8081/register.html
image.png
