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

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

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

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

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

publicindex.htmllogin.html

login.html

// 仿照index.html
<div id="login"></div>

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

srcloginlogin.main.jslogin.router.jslogin.vue

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

// 仿照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:"登陆"}},],
});

login.vue

// 仿照App.vue
<template>    <div id="login"><router-view></router-view></div>
</template><script>
export default {data(){return{}}
}
</script><style scoped></style>

第三步：配置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',        },    },

第四步：运行访问：

npm run serve

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

localhost:port/login.html

第五步：打包

npm run build

第六步：部署，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;
}

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