Vue cli4 多页面共存路由配置全过程

写在前面

使用vue cli进行开发，所有表现都会通过注入在index.html表现。

如果要实现多个页面节点，一般通过路由来实现，路由有两种模式，分别是默认的hash模式，History模式，它们的区别是：

hash模式，产生的目录结构为：www.doamin.com/#/good

history模式，产生的目录结构为：www.doamin.com/good/

配置的方法是定义router/router.js文件

const router = new Router({
    mode: 'history',
    routers,
});

即使是上面的方法，但对传统网页有所爱好者依然会不满意，比如会网友问：
当前目前如果有多个页面怎么办？
比如是否能实现这样的网页结构：
www.z01.com/pub/index.html
www.z01.com/pub/listpage.shtml

答案是有的，伟大领袖告诉我们自力更生丰衣足食，让我们动起手来！

1 准备工作

1.1 先查看版本

npm -V
[email protected] C:\Program Files\nodejs\node_modules\npm
vue -V
@vue/cli 4.1.2

1.2 创建项目

vue create templates

会创建一个名为templates的项目
目录结构为：

初始结构.png

npm run serve

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.43.36:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

运行npm run serve，可以在

http://localhost:8080/
http://192.168.43.36:8080/

看到这个页面：

初始index.png

2 多页面配置

2.1 修改目录

1、在src目录下创建一个pages文件夹，
2、在pages文件夹下面创建index文件夹，
修改之后文件夹结构为：

第一次修改目录结构.jpg

3、把public文件夹下的index.html移到index文件夹，
4、把components文件夹下面的HelloWorld.vue移到index文件夹，（这里可以不移动，因为这个是默认生成的一个例子，实际开发中，创建项目生成的这个页面我们根本用不到，移动只是为了方便做例子，不另外写一个index页面）
5、把src文件夹下的App.vue和main.js都移到index文件夹下面

这时候目录结构：

第一次移动文件.png

2.2 理一下逻辑

index.html

这个文件便是打开首页显示的文件。

记住 id="app"这行

App.vue

内容如下：

这里就是写index.html中id="app"这个div的内容。
并且引入了HelloWorld.vue
在

components: {
    HelloWorld
  }

包含了这个组件
在

给HelloWorld.vue传入了一个msg变量

HelloWorld.vue

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

render: h => h(App)这句话的意思是创建 App element
就是下面这个函数的意思

render: function (createElement) {
    return createElement(App);
}

2.3 修改文件名称

App.vue改为index.vue;
main.js改为index.js

2.4 修改文件内容

index.vue

index.js

import Vue from 'vue'
import App from './index.vue'  修改这里

Vue.config.productionTip = false

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

3 配置vue.config.js

在src文件夹同一级目录添加一个名为vue.config.js的js文件。

添加vue.config.js.png

内容如下：

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'assets',
    indexPath: 'index.html',
    filenameHashing:true,
    pages: {
        index: {
            entry: "./src/pages/index/index.js", // 配置入口js文件
            template: "./src/pages/index/index.html", // 主页面
            filename: "index.html", // 打包后的html文件名称
            title: "首页", // 打包后的.html中
  
  
    
    

    
  

baicai.vue

baicai.js

import Vue from 'vue'
import App from './baicai.vue'

Vue.config.productionTip = false

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

5 配置router

在src下创建router文件夹，在router文件夹下创建router.js
修改内容为：

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

import index from '../pages/index/index.vue';
import baicai from '../pages/baicai/baicai.vue';

Vue.use(Router);

const routers = [
    {
        path: '/',
        redirect: '/index',
        component: index,
        meta: {requiresAuth: false}
    },
    {
        path: '/index',
        name: 'index',
        component: index,
        meta: { requiresAuth: false },
    },
    {
        path: '/baicai',
        name: 'baicai',
        component: baicai,
        meta: { requiresAuth: false },
    },
];
const router = new Router({
    mode: 'history',
    routers,
});

export default router;

6 定义vue.config.js

如果只增加了前面几步，访问是可以，但页面不会生效，还需要定义全局使该页生效。
回到项目的根目录，打开vue.config.js，增加baicai一段资源引用，完整代码如下：

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'assets',
    indexPath: 'index.html',
    filenameHashing:true,
    pages: {
        index: {
            entry: "./src/pages/index/index.js", // 配置入口js文件
            template: "./src/pages/index/index.html", // 主页面
            filename: "index.html", // 打包后的html文件名称
            title: "首页", // 打包后的.html中