Vue.js 搭建多页应用

Vue.js 搭建多页应用

• 参考vue2.0之多页面的开发

• 创建项目

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

完美

• 如果有多更多的页面， 仿照上面步骤再分别添加