第二节——vue多页面开发 - 前端小小匠 - 编程天地

第二节——vue多页面" title="vue多页面">vue多页面开发

我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的，其实不是。因为vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。

但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。

1、进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：

entry: {
    app: \'./src/main.js\',
    one: \'./src/pages/one/one.js\'
  },

注意one的修改。

2、对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：

new HtmlWebpackPlugin({
      filename: \'index.html\',
      template: \'index.html\',
      inject: true,
      chunks: [\'app\']
    }),
    //one
    new HtmlWebpackPlugin({
        filename: \'one.html\',
        template: \'src/pages/one/one.html\',
        inject: true,
        chunks: [\'one\']
    }),

在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。

3、之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件，在build里加入这个：

build: {
    // Template for index.html
    index: path.resolve(__dirname, \'../dist/index.html\'),
    // one
    one: path.resolve(__dirname, \'../dist/one.html\'),

4、然后打开/build/webpack.prod.conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：

// 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\',

chunks: [\'manifest\', \'vendor\', \'app\']

}),

// one

new HtmlWebpackPlugin({

filename: config.build.one,

template: \'one.html\',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

chunksSortMode: \'dependency\',

chunks: [\'manifest\', \'vendor\', \'one\']

}),

其中filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。

这里展示一下我的项目目录

1、然后one.js文件可以这样写：

import Vue from \'vue\'
import one from \'./one.vue\'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: \'#one\',
    //teleplate：\'<cell/>\',
   // components:{ cell }
    render: h => h(one)
})

这个配置在运行时（npm run dev）会报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>)

网上的解释是这样的：

运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%，只有 17.14 Kb min+gzip大小。

这里面我用render函数取代了组件的写法，在运行就没问题了。

2、one.vue写法如下：

<template>
    <div id="one">
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        name: \'one\',
        data() {
            return {
                msg: \'I am one\'
            }
        }
    }
</script>

3、one.html写法如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>one-page</title>
</head>
<body>
    <div id="one"></div>
</body>
</html>

注意id的修改，之前忘记修改，页面一片空白。

4、最后App.vue里这样写：

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <p>
            <a href="one.html" target="_blank">one-page</a>
        </p>
        <router-view/>
    </div>
</template>
<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>