Vue.js 搭建多页应用
- 创建项目
vue init webpack VueMultiPageApplication
- 仿照index.html,App.vue,main.js 创建one.html,One.vue,one.js
one.js
import Vue from 'vue'
import One from './One.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#one',
render: h => h(One)
})
One.Vue
<template>
<div id="one">
{{msg}}
</div>
</template>
<script>
export default {
name: 'one',
data () {
return {
msg: 'This is One Page .'
}
}
}
</script>
- \build\webpack.base.conf.js → module.exports → entry,配置添加多个入口
entry: {
app: './src/main.js',
one: './src/one.js'
},
- \build\webpack.dev.conf.js → module.exports → plugins 添加如下内容(修改已有 index.html 添加 chunks)
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: 'one.html',
template: 'one.html',
inject: true,
chunks: ['one']
})
- \config\index.js → build
index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
- /build/webpack.prod/conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：
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',
chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
filename: config.build.one,
template: 'one.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
}),
- App.vue里面这么写
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
<a href="one.html">one</a><br>
</div>
</template>
- 启动试试 (鸡冻)
npm run dev
- 点(show)击(dou) one
完美
- 如果有多更多的页面， 仿照上面步骤再分别添加
