由于vue為單頁面項目，通過控制組件局部渲染，main.js是整個項目唯一的入口，整個項目都在一個index.html外殼中。

若項目過大，會造成單頁面負載過重；同時，多頁面利于模塊獨立部署。

如果項目中不同的頁面需要不同的main.js和App.vue這樣就需要配置多個入口了。

要單獨將頁面當成一個項目入口文件，以下以登陸頁面為例：

第一步：在項目public文件夾下創(chuàng)建一個login.html，其實就是將index.html復(fù)制一份，將title改一下：

public
    index.html
    login.html

login.html

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

第二步：在src文件夾下創(chuàng)建一個login文件夾，分別創(chuàng)建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;
}

這樣就可以正常訪問多個地址了。文章來源地址http://www.zghlxwxcb.cn/news/detail-815039.html

到了這里，關(guān)于vue前端開發(fā)中，通過vue.config.js配置和nginx配置，實現(xiàn)多個入口文件的實現(xiàn)方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！