基于 Webpack4 的 Vue2 多页应用教程

基于 Webpack4 的 Vue2 多页应用教程

webpack4-vue2-multiPage基于 webpack4 搭建 vue2 vuex 多页应用项目地址:https://gitcode.com/gh_mirrors/we/webpack4-vue2-multiPage

1. 项目的目录结构及介绍

webpack4-vue2-multiPage/
├── build/                  # Webpack 配置文件目录
│   ├── webpack.base.conf.js # 基础配置文件
│   ├── webpack.dev.conf.js  # 开发环境配置文件
│   ├── webpack.prod.conf.js # 生产环境配置文件
├── src/                    # 源代码目录
│   ├── assets/              # 静态资源目录
│   ├── components/          # Vue 组件目录
│   ├── pages/               # 页面目录
│   │   ├── page1/            # 页面1
│   │   │   ├── App.vue       # 页面1的主组件
│   │   │   ├── main.js       # 页面1的入口文件
│   │   ├── page2/            # 页面2
│   │   │   ├── App.vue       # 页面2的主组件
│   │   │   ├── main.js       # 页面2的入口文件
│   ├── store/               # Vuex 状态管理目录
│   │   ├── index.js         # Vuex 入口文件
│   │   ├── modules/         # Vuex 模块目录
│   ├── router/              # Vue-Router 路由配置目录
│   │   ├── index.js         # 路由入口文件
├── static/                 # 静态文件目录
├── .babelrc                # Babel 配置文件
├── .eslintrc.js            # ESLint 配置文件
├── .gitignore              # Git 忽略文件配置
├── package.json            # 项目依赖和脚本配置
├── README.md               # 项目说明文档

2. 项目的启动文件介绍

入口文件

每个页面都有一个对应的入口文件，位于 src/pages/ 目录下。例如，page1 页面的入口文件是 main.js，其内容如下：

import Vue from 'vue';
import App from './App.vue';
import store from '@/store';
import router from '@/router';

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

主组件

每个页面的主组件位于 src/pages/ 目录下对应的页面目录中。例如，page1 页面的主组件是 App.vue，其内容如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

3. 项目的配置文件介绍

Webpack 配置文件

基础配置文件

build/webpack.base.conf.js 是 Webpack 的基础配置文件，包含了通用的配置项，如入口文件、输出路径、模块解析等。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: {
    page1: './src/pages/page1/main.js',
    page2: './src/pages/page2/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

开发环境配置文件

build/webpack.dev.conf.js 是开发环境的配置文件，包含了开发服务器、热更新等配置。

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf');

module.exports = merge(baseConfig, {
  mode:

webpack4-vue2-multiPage基于 webpack4 搭建 vue2 vuex 多页应用项目地址:https://gitcode.com/gh_mirrors/we/webpack4-vue2-multiPage