前言

vue.config.js 是一个用于 Vue 项目的配置文件，用于自定义项目的构建配置。在这个文件中，你可以修改 webpack 相关的选项，以满足你的项目需求。
webpack当前版本 @5.88.2

在你的项目根目录下，找到或创建一个名为 vue.config.js 的文件，根据以下内容进行修改:

配置静态资源访问路径

module.exports = {
  // 静态资源访问路径，默认 '/'
  publicPath: './'
}

配置输出目录

module.exports = {
  // 指定构建后的输出目录，默认 'dist'
  outputDir: 'dist'
}

配置开发服务器启动时是否自动打开和端口号

module.exports = {
   // 配置开发服务器选项
  devServer: {
    // 开发服务器启动时是否自动打开浏览器
    open: true,
    // 端口号
    port: 3000
  },
}

自定义 webpack 配置：

module.exports = {
  // webpack 的配置对象
  configureWebpack: {
    // 在这里添加或修改 webpack 的配置
  },
}

配置路径别名alias

找到 src/assets 文件夹，新建 images、scripts、styles 文件夹
将 src/assets 文件夹中 logo.png 文件放入 images 文件夹
在 vue.config.js 配置中中添加以下两部分代码：

const path = require('path')

configureWebpack: {
  // 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
  resolve: {
    // 设置路径别名
    alias: {
      '@': path.resolve('src'),
      '@public': path.resolve('public'),
      '@img': path.resolve('src/assets/images'),
      '@js': path.resolve('src/assets/scripts'),
      '@css': path.resolve('src/assets/styles')
    }
  }
}

上述代码使用 Node.js 的 path 模块来处理文件路径。__dirname 表示当前文件所在的目录。

在 resolve.alias 下添加你需要的路径别名。例如，'@' 被配置为指向 src 目录，表示你可以使用 @ 作为 src 目录的别名。

配置文件改动后需要重新启动开发服务器，这样才能让修改生效。

现在，你可以在你的 Vue 项目中使用路径别名了。例如，你可以使用 @img 来引用 src/assets/images 目录下的图片。

1.找到 src/App.vue
2.将logo图片路径改为以下内容后：

<img alt="Vue logo" src="@img/logo.png">

3.将组件引入路径改为以下内容：

import HelloWorld from '@/components/HelloWorld.vue'

4. 查看效果。

vue.config.js 修改完成后的文件内容如下：

const path = require('path')

module.exports = {
  // 静态资源访问路径
  publicPath: './',
  // 指定构建后的输出目录，默认是 'dist'
  outputDir: 'dist',
  // 配置开发服务器选项
  devServer: {
    // 开发服务器启动时是否自动打开浏览器
    open: true,
    // 端口号
    port: 3000
  },
  // webpack 的配置对象
  configureWebpack: {
    // 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
    resolve: {
      // 设置路径别名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}

还可以使用其它的选项来自定义构建行为，具体可以参考 Vue CLI 官方文档中的 vue.config.js 配置参考。

框架搭建整体流程

• 第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架

• 第二步 Vue2 vue.config.js 基础配置，路径别名alias

• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量

• 第四步 Vue2 配置ESLint

• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩

• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

• 第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

点击下载步骤 1-7 配置完成的完整 Demo