vue 多页面应用例子_vue 配置多页面应用的示例代码

前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化)

vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。

1. 新建 vue 项目

vue init webpack vue_multiple_test

cd vue_multiple_test

npm install

2. 安装 glob

npm i glob --save-dev

glob 模块用于查找符合要求的文件

3. 目标结构目录

.

├── README.md

├── build

│ ├── build.js

│ ├── check-versions.js

│ ├── logo.png

│ ├── utils.js

│ ├── vue-loader.conf.js

│ ├── webpack.base.conf.js

│ ├── webpack.dev.conf.js

│ └── webpack.prod.conf.js

├── config

│ ├── dev.env.js

│ ├── index.js

│ └── prod.env.js

├── generatePage.sh

├── index.html

├── package-lock.json

├── package.json

├── src

│ ├── assets

│ │ └── logo.png

│ └── pages

│ ├── page1

│ │ ├── App.vue

│ │ ├── index.html

│ │ └── index.js

│ └── page2

│ ├── App.vue

│ ├── index.html

│ └── index.js

└── static

其中，pages文件夹用于放置页面。 page1 和 page2用于分别放置不同页面，且默认均包含三个文档: App.vue, index.html, index.js, 这样在多人协作时，可以更为清晰地明确每个文件的含义。除此之外，此文件也可配置路由。

4. utils 增加下述代码:

const glob = require('glob')

const PAGE_PATH = path.resolve(__dirname, '../src/pages')

const HtmlWebpackPlugin = require('html-webpack-plugin')

其中：PAGE_PATH 为所有页面所在的文件夹路径，指向 pages文件夹。

exports.entries = function () {

/*用于匹配 pages 下一级文件夹中的 index.js 文件 */

var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')

var map = {}

entryFiles.forEach((filePath) => {

/* 下述两句代码用于取出 pages 下一级文件夹的名称 */

var entryPath = path.dirname(filePath)

var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)

/* 生成对应的键值对 */

map[filename] = filePath

})

return map

}

该方法用于生成多页面的入口对象，例如本例，获得的入口对象如下：

{

page1: '/Users/work/learn/vue/vue_multiple_test/src/pages/page1/index.js',

page2: '/Users/work/learn/vue/vue_multiple_test/src/pages/page2/index.js',

}

其中：key 为当前页面的文件夹名称，

```value``` 为当前页面的入口文件名称

exports.htmlPlugin = function () {

let entryHtml = glob.sync(PAGE_PATH + '/*/index.html')

let arr = []

entryHtml.forEach((filePath) => {

var entryPath = path.dirname(filePath)

var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)

let conf = {

template: filePath,

filename: filename + `/index.html`,

chunks: ['manifest', 'vendor', filename],

inject: true

}

if (process.env.NODE_ENV === 'production') {

let productionConfig = {

minify: {

removeComments: true, // 移除注释

collapseWhitespace: true, // 删除空白符和换行符

removeAttributeQuotes: true // 移除属性引号

},

chunksSortMode: 'dependency' // 对引入的chunk模块进行排序

}

conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置

}

arr.push(new HtmlWebpackPlugin(conf))

})

return arr

}

4. webpack.base.conf.js修改入口如下：

```entry: utils.entries()```

5. webpack.dev.conf.js 删除下述代码

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

})

6. webpack.prod.conf.js 删除下述代码

new HtmlWebpackPlugin({

filename: config.build.index,

template: 'index.html',

inject: true,

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortMode: 'dependency'

})

7. 构建结果

【dev】开发环境下，执行 npm run dev 访问:

http://localhost:8080/page1/index.html

http://localhost:8080/page2/index.html

即为访问不同的页面

【production】生产环境下，执行 npm run build, 生成的文件目录如下所示:

│ ├── dist

│ ├── page1

│ │ └── index.html

│ ├── page2

│ │ └── index.html

│ └── static

│ ├── css

│ │ ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css

│ │ ├── page1.86a4513a3e04c0dcb73e6d6aea4580e4.css.map

│ │ ├── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css

│ │ └── page2.86a4513a3e04c0dcb73e6d6aea4580e4.css.map

│ └── js

│ ├── manifest.0c1cd46d93b12dcd0191.js

│ ├── manifest.0c1cd46d93b12dcd0191.js.map

│ ├── page1.e2997955f3b0f2090b7a.js

│ ├── page1.e2997955f3b0f2090b7a.js.map

│ ├── page2.4d41f3b684a56847f057.js

│ ├── page2.4d41f3b684a56847f057.js.map

│ ├── vendor.bb335a033c3b9e5d296a.js

│ └── vendor.bb335a033c3b9e5d296a.js.map

8.【懒人福利】使用shell脚本自动构建基础页面

在项目文件下新建shell脚本generatePage.sh, 并在脚本中写入下述代码：

#!/bin/bash

# 打开 pages 文件夹，并创建文件

cd src/pages

for file in $(ls)

do

if [ $file == $1 ];then

echo $1' 文件已存在, 请使用其他名字'

exit

fi

done

mkdir $1

cd $1

# 生成 index.html

echo "" > index.html

echo '

' > index.html

# 生成 App.vue

echo "" > App.vue

echo '

export default {

name: "App"

}

#app {}

' > App.vue

# 生成 index.js

echo "" > index.js

echo "import Vue from 'vue'

import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

components: { App },

template: ''

})" > index.js

之后在项目路径下输入下述命令:

bash generatePage.sh page4

即可在pages文件夹下生成一个名为page4的新页面。还可以通过自定义shell脚本的内容写入路由等，以实现定制需求。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。