vuecli3 多页面配置

落日映苍穹つ 2023-01-19 03:24 300阅读 0赞

### vuecli3 多页面配置 ###

*   *  项目结构
     *  1. login文件配置（有配置路由）
     *   *  login文件目录
         *  login-main.js
         *  login-router.js
         *  login.vue
     *  2. home文件配置
     *   *  home文件目录
         *  home-main.js
         *  home.vue
     *  3. 设置id
     *  4. vue.config.js配置
     *  5. 运行展示
     *  6. 注意

## 项目结构 ##

案例多设置了login和home路径，所以在public里面需要配置login.html和home.html文件，src文件夹中新建了login和home文件夹用来存在对应的页面配置、数据以及模板。  
![在这里插入图片描述][20210507174350597.png_pic_center]

## 1. login文件配置（有配置路由） ##

### login文件目录 ###

![在这里插入图片描述][20210507172913506.png_pic_center]

### login-main.js ###

写法与main.js的一样

import Vue from 'vue';
    import login from './login.vue';
    import router from './login-router';
    
    Vue.config.productionTip = false;
    
    new Vue({
      router,
      render: h => h(login)
    }).$mount('#login')

### login-router.js ###

如果需要路由就配置自己的路由，不需要路由就不用创建login-router.js

import Vue from 'vue';
    import Router from 'vue-router';
    
    Vue.use(Router);
    
    export default new Router({
      routes: [
        {
          path: '/zhuce',
          name: 'Zhuce',
          component: () => import('./view/zhuce.vue')
        },
        {
          path: '/wechat',
          name: 'WeChat',
          component: () => import('./view/wechat.vue')
        }
      ]
    })

### login.vue ###

<template>
      <div id="login">
        <div id="nav">
          <router-link to="/zhuce">注册</router-link> |
          <router-link to="/wechat">微信</router-link>
        </div>
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Login'
    }
    </script>
    
    <style lang="less" scoped>
    #nav {
      padding: 30px;
    
      a {
        font-weight: bold;
        color: #2c3e50;
    
        &.router-link-exact-active {
          color: #42b983;
        }
      }
    }
    </style>

## 2. home文件配置 ##

### home文件目录 ###

![在这里插入图片描述][20210507173832195.png_pic_center]

### home-main.js ###

import Vue from 'vue';
    import home from './home.vue';
    
    Vue.config.productionTip = false;
    
    new Vue({
      render: h => h(home)
    }).$mount('#home')

### home.vue ###

## 3. 设置id ##

public：赋值2份index.js，改名为login.html，home.html，id分别改为login、home  
login.vue：id改为login  
login-main.js：`$mount('#login')`  
home.vue：id改为home  
home-main.js：`$mount('#home')`

修改id是如果使用qiankun或者datax类似这种框架来嵌套项目中不同路径下的模板，模板的id都是app的话就导致id重名，影响样式

## 4. vue.config.js配置 ##

module.exports = {
      productionSourceMap: false,
      publicPath: process.env.NODE_ENV === 'production'? '/': '/', //静态资源访问路径
      pages: {
        login: {
          entry: 'src/login/login-main.js',
          template: 'public/login.html'
        },
        home: {
          entry: 'src/home/home-main.js',
          template: 'public/home.html'
        },
        index: {
          entry: 'src/main.js',
          template: 'public/index.html'
        }
      }
    }

## 5. 运行展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][20210507180626894.png_pic_center]

## 6. 注意 ##

多页面配置后，默认的index.html无法访问，解决方案

1.  在vue.config.js中page配置index页面
2.  删除src下面的mian.js，public下的index.html，这种方法默认打开提示 Cannot GET /，也就是没有默认根路径页面

如有出入望指教…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70_pic_center 2]

[20210507174350597.png_pic_center]: /images/20221021/c576604b8bd34386bbc925cc7881cbe1.png
[20210507172913506.png_pic_center]: /images/20221021/80e38442893a4eafbfa96a0e8c66442d.png
[20210507173832195.png_pic_center]: /images/20221021/54a370d95eaf49848ed02ea859005afc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/89d3b79b207041ea978004c0cc16e138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/3cc463b7fe854a7983cbd2eb897c8e11.png
[20210507180626894.png_pic_center]: /images/20221021/c02c06fb4ac84f4a83101474aa37f2d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221021/fba1fdd8519e4aa68336349191154792.png