Vue+webpack项目配置便于维护的目录结构教程详解

下面我将详细讲解“Vue+webpack项目配置便于维护的目录结构教程详解”的完整攻略。

1. 开始前的准备

首先需要确保已经正确安装了Node.js和Vue-cli，并且创建了一个基于Vue-cli的项目。

2. 目录结构设计

在Vue-cli创建的项目中，已经自带了一些目录和文件，如下所示：

.
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

但是这个目录结构并不符合我们的需求，我们需要重新设计一个目录结构。我们可以把不同的功能模块分别放到不同的目录下。

下面是一个比较通用的目录结构示例：

.
├── dist                         // 打包后目录
├── node_modules                 // 依赖目录
├── public                       // 公共目录
│   ├── favicon.ico             // 网站图标（可更换）
│   └── index.html              // 网站首页
├── src                          // 源码目录
│   ├── api                      // 接口封装
│   ├── assets                   // 静态资源
│   ├── common                   // 全局公共文件（如常量、工具方法等）
│   ├── components               // 组件
│   ├── router                   // 路由配置
│   ├── store                    // 状态管理
│   ├── styles                   // 样式
│   ├── views                    // 页面
│   ├── App.vue                  // 页面入口文件
│   └── main.js                  // 程序入口文件，加载各种公共组件
├── .babelrc                     // Babel配置文件
├── .gitignore                   // git忽略配置
├── package.json                 // 依赖配置
├── README.md                    // 项目说明文档
├── webpack.base.js              // webpack基础配置
├── webpack.dev.js               // webpack开发环境配置
└── webpack.prod.js              // webpack生产环境配置

我们可以根据实际需求对目录结构进行调整。

3. webpack配置

到这里，我们已经有了一个合适的目录结构，还需要配置webpack来让工程可以正常运行。

我们可以将webpack配置分成基本配置和环境配置两个部分。基本配置是所有环境通用的，包括打包入口、输出目录、外部模块、样式处理等。而开发环境和生产环境不同之处在于开发环境需要热加载、soucemap等功能，而生产环境则需要压缩、混淆、分离等功能。

以下是两个示例webpack配置文件，可以根据需要进行调整：

webpack.base.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      'styles': path.resolve(__dirname, '../src/styles')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: true
    })
  ]
}

webpack.dev.js

const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const webpack = require('webpack')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

module.exports = merge(webpackBaseConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 8080,
    overlay: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new FriendlyErrorsPlugin({
      compilationSuccessInfo: {
        messages: [
          `Your application is running here: http://localhost:8080`
        ]
      }
    })
  ]
})

webpack.prod.js

const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')

module.exports = merge(webpackBaseConfig, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: true
          }
        },
        sourceMap: true,
        parallel: true
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
            annotation: true
          }
        }
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      allChunks: true
    }),
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
})

以上是webpack配置文件的示例，可以根据项目需求进行调整。

4. 示例解释

这里给出两个示例，一个示例是调用后端API来加载数据并渲染页面，一个示例是使用第三方组件库Ant Design Vue。

示例一：调用后端API

在src/api目录下，我们可以定义一些封装了接口调用逻辑的API函数，示例代码如下：

import axios from 'axios'

const api = {
  getList () {
    return axios.get('/api/list').then(res => res.data)
  },

  getDetail (id) {
    return axios.get(`/api/detail?id=${id}`).then(res => res.data)
  }
}

export default api

这里使用了Axios来发送HTTP请求。

接下来，在views目录下，我们可以定义一些页面级组件，如List.vue和Detail.vue。这些组件可以调用API函数来获取数据并渲染页面。示例代码如下：

List.vue

<template>
  <div class="list">
    <div class="item" v-for="item in list">
      <h2>{{ item.title }}</h2>
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    api.getList().then(res => {
      this.list = res
    })
  }
}
</script>

<style lang="scss" scoped>
.list {
  .item {
    h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>

Detail.vue

<template>
  <div class="detail">
    <h1>{{ detail.title }}</h1>
    <div class="content">{{ detail.content }}</div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      detail: {}
    }
  },
  created () {
    api.getDetail(this.$route.params.id).then(res => {
      this.detail = res
    })
  }
}
</script>

<style lang="scss" scoped>
.detail {
  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .content {
    margin-top: 20px;
  }
}
</style>

示例二：使用Ant Design Vue

Ant Design Vue是一个很流行的组件库，可以加速项目开发。我们可以使用它来改善项目的UI效果。

首先需要安装Ant Design Vue：

npm install ant-design-vue -S

然后在main.js中引入Ant Design Vue并使用：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

接下来，在使用Ant Design Vue的组件时，需要按照官方文档进行使用。例如：

<!-- 使用Ant Design Vue的Button组件 -->
<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <a-button type="primary" @click="handleClick">点击</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Ant Design Vue!'
    }
  },
  methods: {
    handleClick () {
      console.log('Click')
    }
  }
}
</script>

<style lang="scss" scoped>
.hello {
  padding: 20px;
}
</style>