在使用vue进行开发时，往往采用单页应用(spa)的方式，这种方式只有一个html页面，所有的重要组件都在该页面中动态加载，并且使用vue的路由器来呈现不同的视图。然而，有些情况下需要将单页应用转换为多页面(mpa)，也就是说需要为每个视图创建一个不同的html文件。在这篇文章中，我们将讨论如何将vue单页应用转换为多页面应用。
- 配置webpack
首先我们需要在webpack中配置我们的MPA，以确保每个组件都可以生成自己的HTML文件。
通过webpack插件，我们可以为每个视图配置一个入口点，并且使用HtmlWebpackPlugin插件来为每个HTML文件生成一个入口文件，以及为生成的JS文件添加一个Script标签。以这种方式，我们就能根据需要为每个视图创建一个HTML文件。
以下是一个简单的webpack配置示例：
module.exports = {
entry: {
home: './src/pages/home/main.js',
about: './src/pages/about/main.js',
contact: './src/pages/contact/main.js'
},
output: {
path: './dist',
filename: '[name].[hash].js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'home.html',
template: './src/pages/home/index.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: './src/pages/about/index.html',
chunks: ['about']
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
template: './src/pages/contact/index.html',
chunks: ['contact']
})
]
}在上面的代码中，我们定义了三个入口点，并且分别为每个HTML文件提供了一个模板，这里我们使用HtmlWebpackPlugin将生成的JS文件添加到每个HTML文件中。
立即学习“前端免费学习笔记（深入）”；
- 路由配置
接下来我们需要对路由进行一些修改，以确保它能够适应多页面应用。我们需要将Vue路由器切换到“history”模式，以使路由不会添加额外的“#”字符，同时需要修改路由配置以将其与新的HTML文件名匹配。我们可以通过以下方式完成所需的更改：
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import createRouter from '@/router'
import { sync } from 'vuex-router-sync'
import store from '@/store'
Vue.config.productionTip = false
const { app, router: createdRouter } = createRouter()
// sync the router with the vuex store
// this registers `store.state.route`
sync(store, createdRouter)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
created() {
const linkTags = document.getElementsByTagName('link')
const links = Array.prototype.slice.call(linkTags)
links.forEach(link => {
const href = link.getAttribute('href')
if (href && href.indexOf('.') !== -1) {
link.setAttribute('href', `/public/pages/${[this.$route.path.split('/')[1]]}/${href}`)
}
})
},
render: h => h(App)
})在上面的代码中，我们首先导入createRouter()函数，并使用它创建应用程序和路由器实例。然后我们将Vuex路由器与Vue应用程序进行同步，并调用create()函数来修改用于引用静态资源的a标签的href属性，以确保它们能够引用正确的CSS和JS文件。
我们还需要修改路由器配置，以确保它能够映射到正确的HTML文件，如下所示：
由于我高估了大家对zblog程序的熟知度，发现还有很多站长并不是太熟悉这款程序，甚至连后台的登陆入口都不清楚。所以我晚上抽了一点点时间把该ZBLOG企业网站源码进行的修正，补充了大家的一些问题。并且我写了比较详细的使用教程，能够帮助新手朋友修改变成自己的企业网站使用。 修订版本改进了几处问题： 第一，修正了单页面中的顶部BANNER FLASH幻灯图片的显示错误问题； 第二，修正了在产品中心标题显
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
import About from '@/pages/about/About.vue'
import Contact from '@/pages/contact/Contact.vue'
Vue.use(Router)
export default function createRouter() {
const router = new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
title: 'Home Page'
}
},
{
path: '/about',
name: 'About',
component: About,
meta: {
title: 'About Page'
}
},
{
path: '/contact',
name: 'Contact',
component: Contact,
meta: {
title: 'Contact Page'
}
}
]
})
return { router }
}- 确定静态资源路径
在我们将单页应用转换为多页应用之后，我们需要确保所有的静态资产都能正确地加载。在单页应用中，我们通常会将所有的静态资源都引用到一个HTML文件中，因此我们可以将webpack的输出目标设置为根目录下的/dist，以确保所有的文件都能正确地位于在多个HTML页面中访问。
- 编写前端代码
在我们完成了上述步骤后，我们现在可以编写前端代码，并使用Vue进行开发。我们可以为每个页面编写独立的组件，或者使用Vue组件模板来共享某些组件。无论使用哪种方式，我们都需要确保每个组件的文件名和HTML文件的文件名匹配。
// Home.vue
<template>
<div>
<h1>Home page</h1>
<p>Welcome to my home page!</p>
</div>
</template><!-- home.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home Page</title> <link rel="stylesheet" href="/public/pages/home/app.12345.css"> </head> <body> <div id="app"></div> <script src="/public/pages/home/app.12345.js"></script> </body> </html>
最后要确保在webpack中配置publicPath能够正确地处理静态资源路径。publicPath应该指向每个HTML文件的基本路径，以确保每个文件都可以正确地加载它们所需的所有资源。
// webpack.config.js
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[hash:8].js',
publicPath: '/'
},
// ...
}- 打包和部署
现在我们可以使用webpack将我们的MPA构建为一组文件，并将它们部署到网站服务器中。我们需要为每个HTML文件生成一个独立的目录，并为每个目录创建一个公共组件。如果我们使用Vue-cli 3.0，我们可以通过修改vue.config.js文件来为多页面应用程序设置构建配置，如下所示：
// vue.config.js
module.exports = {
pages: {
home: {
entry: 'src/pages/home/main.js',
template: 'public/pages/home/app.html',
filename: 'home.html',
chunks: ['chunk-vendors', 'chunk-common', 'home']
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/pages/about/app.html',
filename: 'about.html',
chunks: ['chunk-vendors', 'chunk-common', 'about']
},
contact: {
entry: 'src/pages/contact/main.js',
template: 'public/pages/contact/app.html',
filename: 'contact.html',
chunks: ['chunk-vendors', 'chunk-common', 'contact']
}
}
}在上面的代码中，我们使用了Vue CLI提供的“pages”属性，它可以让我们配置每个组件的不同页面，并自动为每个页面生成相应的文件。
现在我们已经完成了多页面应用程序的创建和部署。通过这种方式，我们可以在使用Vue构建应用程序时，非常灵活地处理多种页面。我们可以根据需要添加或删除页面，并为每个页面创建独立的组件。总的来说，这使得我们能够构建更加模块化和可维护的应用程序。
