由于vue为单页面项目，通过控制组件局部渲染，main.js是整个项目唯一的入口，整个项目都在一个index.html外壳中。
若项目过大，会造成单页面负载过重；同时，多页面利于模块独立部署。
如果项目中不同的页面需要不同的main.js和App.vue这样就需要配置多个入口了。
要单独将页面当成一个项目入口文件，以下以登陆页面为例：
第一步：在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下：
public index.html login.html
login.html
// 仿照index.html <div id="login"></div>
第二步：在src文件夹下创建一个login文件夹，分别创建login.main.js、login.router.js、login.vue三个文件
src login login.main.js login.router.js login.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; }
这样就可以正常访问多个地址了。
