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

文章目录

• • • • 第一步：在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下：
      • • login.html
        • 第二步：在src文件夹下创建一个login文件夹，分别创建login.main.js、login.router.js、login.vue三个文件
        • • login.main.js
          • login.router.js
          • login.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

            login.html

            // 仿照index.html

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

            src    login        login.main.js        login.router.js        login.vue

            login.main.js

            // 仿照main.jsimport 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.jsimport 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                    export default {    data(){        return{        }    }}

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

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