Vue中脚手架配置多入口

最新推荐文章于 2024-04-23 13:05:07 发布

没有昵称...

最新推荐文章于 2024-04-23 13:05:07 发布

阅读量853

点赞数 1

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/zebghfv/article/details/121075339

版权

Vue通过cli脚手架创建的项目是单页面工程项目，main.js就是整个项目的入口，组件都是挂载到index.html下的。对于大型的项目使用单页面工程项目，负载就会加重，所以更适合多页面。
第一步用vue-cli脚手架创建一个新的项目。
目录结构如下：
在这里插入图片描述
第二步：创建新的入口文件。项目最开始的入口文件就是main.js、app.vue、index.html，以此类推：创建一个login.js、login.vue、login.html。
创建好新的入口文件后，目录文件如下：

login.html:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
    </title>
</head>

<body>
    <div id="login"></div>
</body>

</html>

login.vue:

<template>
  <div id="login">
      <h1>哈哈哈哈</h1>
  </div>
</template>

<script>
export default {
    name: "Login",
}
</script>

<style>

</style>

import Vue from 'vue'
import Login from './Login.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(Login),
}).$mount('#login')

下一步进行就是通过webpack配置多入口。
在项目目录下创建vue.config.js文件.
目录如下：
在这里插入图片描述
配置代码：

module.exports = {
    devServer: {
        port: 8081,
        open: true,
    },
    pages: {
        login: {
            entry: ['./src/login.js'],
            template: './public/login.html',
            filename: "login.html",
            title: "登录入口",

        },
        app: {
            entry: ['./src/main.js'],
            template: './public/index.html',
            filename: "index.html",
            title: "app入口",

        }

    }
}

然后就进行配置完成。通过路由：http://localhost:8081/login可以进行访问login的入口

没有昵称...

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中脚手架配置多入口

Vue通过cli脚手架创建的项目是单页面工程项目，main.js就是整个项目的入口，组件都是挂载到index.html下的。对于大型的项目使用单页面工程项目，负载就会加重，所以更适合多页面。第一步用vue-cli脚手架创建一个新的项目。目录结构如下：第二步：创建新的入口文件。项目最开始的入口文件就是main.js、app.vue、index.html，以此类推：创建一个login.js、login.vue、login.html。创建好新的入口文件后，目录文件如下：login.html:&lt
复制链接

扫一扫