一步一步来实现webpack+vue的多页面应用

最新推荐文章于 2025-06-03 15:45:35 发布

原创最新推荐文章于 2025-06-03 15:45:35 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

前端构建工具webpack/gulp等同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

本文介绍如何一步步实现基于webpack的Vue多页面应用。从环境配置到项目初始化，再到目录结构调整和webpack配置，详细讲解了多页面应用的构建过程，并提供项目源码链接。

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

1、现如今的前端，一提到vue、react、angular，大家第一印象就是单页应用。但是连尤雨溪都说过，他从来没说过vue仅适用于单页应用，下面我们就一步一步来实现多页应用

2、全局环境配置和主要使用到的主要开发工具：node、npm、webpack、sass、vue

ps：这里多说一句，sass的安装依赖淘宝镜像会比较容易：

（1）首先全局环境下配置淘宝镜像（注意:是全局环境，也就是c:\user）

npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）进入项目根目录，安装node-sass

cnpm install node-sass --save-dev

（3）接下来就可以执行npm install安装依赖项了

npm install

3、如果大家觉得自己配置项目文件比较耗费时间，可以使用vue-cli脚手架工具安装项目基本目录

（1）首先全局环境下配置vue-cli（注意:是全局环境，也就是c:\user）

npm install -g vue-cli

（2）初始化项目

vue init webpack '项目文件夹名称'

（3）接着就会提示一些项目描述，是否使用单元测试、语法检查等等，实际开发可选yes,demo搭建可忽略

4、整理修改项目初始目录文件

（1）因为是多页面应用，所以项目根目录下的index.html实际是无用的

（2）src开发目录

assets: 公用css、js方法、sass方法等

components: 公用组件

module: 开发模块（可以理解为每个页面），建议每个页面，建一个文件夹

module/index: index模块

index.html：容器页面，相当于单页面中的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>首页</title>
  </head>
  <body>
  	<!-- 容器 -->
    <app></app>
  </body>
</html>

index.vue: 开发文件夹（ps:结构和普通vue文件一样）

img: 用于放置当前页面的图片（就近维护原则）

index.js：将index.vue的内容添加到index.html中

import Vue from 'vue'
import App from './index.vue'


/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

index.scss: 当前样式文件

（3） webpack配置（ps:这里的webpack配置较多，只是说明一些重要的配置）

关键是指定入口文件，这里不再只是main.js，而是循环出的对象或者数组

 entry: entries,
  output: {
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'vux-components': 'vux/src/components'
    }
  },

获取entries

var entries = getEntry('./src/module/**/*.js');

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    // 正确输出js路径
    pathname = tmp.splice(0, 1) + '/' + basename; 
    entries[pathname] = entry;
  });
  
  return entries;
}

5、配置好后，启动npm run dev,方位localhost:8083/module/index.html即可

在index.vue中为按钮添加“点击跳转”事件