vue多页面应用

最新推荐文章于 2024-06-18 11:31:32 发布

xiaoxiao无脸男

最新推荐文章于 2024-06-18 11:31:32 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/106930340

版权

本文是针对vue.config.js里的pages属性配置。详情见官网https://cli.vuejs.org/zh/config/#pages。

Vue.config.js是一个可选的配置文件，其中pages选项是构建多页面应用。

需求：vue搭建的项目中，需要多页面，并单独设置路由。

前提：利用Vue CLI创建项目。

目录结构：跟多页面相关的文件在红色框里面。

Public文件夹中的index.html和page2.html是配置多页面应用的模板来源。

Components里面是公用组件。

Pages文件夹里面的入口文件index.js和page2.js，相当于单页面中的main.js

Pages文件夹里面的Index.vue和Page2.vue，相当于单页面中的App.vue。

Pages文件夹里面的indexRouter.js和page2Router.js，相当于单页面中的router.js。

Views文件夹里面是vue组件。

第一步：

定义componens>AppHeader.vue公用组件:

<template>
  <div>
      <a href="./index.html" target="_blank">跳到首页</a>
      <br/>
       <a href="./page2.html" target="_blank">跳到page2页面</a>
  </div>
</template>

<script>
export default {};
</script>

第二步：定义views里面的组件：

定义views>A.vue:

<template>
  <div>A页面</div>
</template>

<script>
export default {
    name:'A'
}
</script>

定义views>B.vue:

<template>
  <div>B页面</div>
</template>

<script>
export default {
    name:'B'
}
</script>

定义views>index.vue:

<template>
  <div>index页面</div>
</template>

<script>
export default {
    name:'Index'
}
</script>

第三步：定义pages文件夹里面的文件：

定义Pages>index>index.vue:

<template>
  <div id="Index">
    <app-header/>
    <p>首页内容</p>
    <router-link :to="{name:'A'}">跳到A页面</router-link>
    <router-view/>
  </div>
</template>

<script>
import AppHeader from '../../components/AppHeader'
export default {
    name:'Index',
    components:{
      AppHeader
    }
}
</script>

定义Pages>index>index.js:

import Vue from 'vue'
import Index from './Index.vue'
import router from './indexRouter'

Vue.config.productionTip = false

new Vue({
  render: h => h(Index),
  router
}).$mount('#Index')

定义Pages>index>indexRouter.js路由:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
    routes:[
        //首页
        {
            path:'/',
            component:()=>import('@/views/index')
        },
        {
            path:'/a',
            name:'A',
            component:()=>import('@/views/A')
        }
    ],
    mode:'history'
})

export default router

page2文件夹跟index文件夹类似：

定义Pages>page2>Page2.vue:

<template>
  <div id="page2">
    <app-header/>
    <p>Page2页面</p>
    <router-link :to="{name:'B'}">跳到B页面</router-link>
    <router-view/>
  </div>
</template>

<script>
import AppHeader from '../../components/AppHeader'
export default {
    name:'Page2',
    components:{
      AppHeader
    }
}
</script>

定义Pages>page2>Page2.js:

import Vue from 'vue'
import Page2 from './Page2.vue'
import router from './page2Router'

Vue.config.productionTip = false

new Vue({
  render: h => h(Page2),
  router
}).$mount('#page2')

定义Pages>page2>page2Router.js路由:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
    routes:[
        //首页
        {
            path:'/',
            component:()=>import('@/views/index')
        },
        {
            path:'/b',
            name: 'B',
            component:()=>import('@/views/B')
        }
    ],
    mode:'history'
})

export default router

第四步：定义public文件夹里面的index.html和page2.html模板文件;

定义index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    <title>index title</title>
  </head>

  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="Index"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

定义page2.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>page2 title</title>
  </head>

  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="page2"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

第五步：设置vue.config.js文件;

'use strict'
const path = require('path')

function resolve(dir){
    return path.join(__dirname,dir)
}

module.exports = {
    publicPath:'/',
    outputDir:'dist',
    assetsDir:'static',
    configureWebpack:{
        name:'abc',
        resolve:{
            alias:{
                '@':resolve('src')
            }
        }
    },
    pages:{
        index:{
            //应用入口配置，相当于单页面应用的main.js 必需
            entry:'src/pages/index/index.js',
            template:'public/index.html',
            filename:'index.html'
        },
        page2:{
            entry:'src/pages/page2/page2.js',
            template:'public/page2.html',
            filename:'page2.html'
        }
    }
}

主要看vue.config.js里面的pages选项，entry是入口文件，template是模板文件，filename是文件名。

访问http://localhost:8080/效果图：

xiaoxiao无脸男

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
vue多页面应用

本文是针对vue.config.js里的pages属性配置。详情见官网https://cli.vuejs.org/zh/config/#pages。Vue.config.js是一个可选的配置文件，其中pages选项是构建多页面应用。需求：vue搭建的项目中，需要多页面，并单独设置路由。目录结构：跟多页面相关的文件在红色框里面。Public文件夹中的index.html和page2.html是配置多页面应用的模板来源。Components里面是公用组件。Pages文件夹里面的.
复制链接

扫一扫