vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法

由于vue为单页面项目，通过控制组件局部渲染，main.js是整个项目唯一的入口，整个项目都在一个index.html外壳中。

若项目过大，会造成单页面负载过重；同时，多页面利于模块独立部署。

如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。

要单独将页面当成一个项目入口文件，以下以登陆页面为例：

第一步：在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下：

public
    index.html
    login.html
1
2
3

login.html

// 仿照index.html

1
2

第二步：在src文件夹下创建一个login文件夹，分别创建login.main.js、login.router.js、login.vue三个文件

src
    login
        login.main.js
        login.router.js
        login.vue
1
2
3
4
5

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');
1
2
3
4
5
6
7
8
9

login.router.js

// 仿照router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({  
    routes: [
        {
            path: "/",
            name: "login",
            component: () =>
              import(../views/login.vue"),
            meta:{
              title:"登陆"
            }
        },
    ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

login.vue

// 仿照App.vue





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

第三步：配置vue.config.js

在module.exports里加上入口配置：

pages: {//配置多页面入口        
      login: {          
        entry: 'src/login/login.main.js',          
        template: 'public/login.html',        
      },        
      index: {          
        entry: 'src/main.js',          
        template: 'public/index.html',        
      },    
    },
1
2
3
4
5
6
7
8
9
10

第四步：运行访问：

npm run serve
1

这个就是单独的访问地址了

localhost:port/login.html

第五步：打包

npm run build
1

第六步：部署，nginx配置

root /usr/local/nginx/html;
location /login {
    index  login.html login.htm;
    try_files $uri $uri/ /login.html;
}
location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
1
2
3
4
5
6
7
8
9

这样就可以正常访问多个地址了。