vue配置多页面

最新推荐文章于 2025-07-22 10:59:26 发布

原创最新推荐文章于 2025-07-22 10:59:26 发布 · 4k 阅读

5 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用vue-cli构建项目并配置多页面应用。通过在项目根目录下创建vue.config.js文件，可以自定义项目的构建设置，包括页面入口、模板来源和输出文件名等。文章还详细说明了如何创建page文件夹及其内部文件，以及如何修改App.vue和main.js中的路径。最后，通过npm run build命令或在可视化界面运行build，完成项目编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli构建项目初步目录

在test项目根目录下创建vue.config.js来修改配置

vue.config.js内容

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/page/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'index page'
        },
        page1: {
            entry: 'src/page/index/main.js',
            template: 'public/page1.html',
            filename: 'page1.html',
            title: 'page1'
        }
    }
}

按照里面的内容创建page文件夹和里面的文件