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

这篇具有很好参考价值的文章主要介绍了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
<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;
}

这样就可以正常访问多个地址了。文章来源地址https://www.toymoban.com/news/detail-815039.html

到了这里，关于vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！