从零配置Vue CLI，打造完美前端开发环境

前端

2023-10-15 10:21:03

Vue CLI：打造个性化前端开发环境

作为一名前端开发者，您肯定对 Vue CLI 并不陌生。作为 Vue.js 官方推荐的脚手架工具，Vue CLI 旨在帮助您快速创建 Vue.js 项目，提供一系列开箱即用的功能，让您专注于开发本身。

然而，默认的 Vue CLI 配置并不总是适合所有项目。为了满足您的特定需求，了解 Vue CLI 的配置体系至关重要。

Vue CLI 的配置体系

Vue CLI 的配置体系主要由两部分组成：

1. build 文件： 包含脚手架在开发和生产环境下配置 webpack 的方式。

2. config 文件： 包含 build 文件中 webpack 特定配置的值。

换句话说，build 文件中 webpack 配置的值需要引入 config 文件后才能获取。

配置 build 文件

build 文件位于项目根目录，是一个 JavaScript 文件，包含以下内容：

module.exports = {
  // 针对不同运行环境打包的配置
  configureWebpack: (config, isServer) => {
    // isServer 表示当前打包的是服务端渲染还是客户端
  },
  // 生产环境相关的配置
  chainWebpack: (config) => {
    // webpack-chain API可以对webpack的配置进行链式操作
  },
  // 开发环境相关的配置
  devServer: {
    // 端口号
    port: 8080,
    // 是否自动打开浏览器
    open: true,
    // 代理服务器配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

configureWebpack

configureWebpack 方法允许您在开发和生产环境下对 webpack 进行额外配置。它接受两个参数：

config： webpack 的配置对象
isServer： 布尔值，表示当前打包的是服务端渲染还是客户端

chainWebpack

chainWebpack 方法允许您使用 webpack-chain API 对 webpack 的配置进行链式操作。它接受一个参数：

config： webpack-chain 的配置对象

devServer

devServer 对象包含开发环境相关的配置，如端口号、自动打开浏览器、代理服务器配置等。

配置 config 文件

config 文件位于项目根目录，是一个 JavaScript 文件，包含以下内容：

module.exports = {
  // 框架相关配置
  framework: 'vue',
  // 生产环境相关配置
  productionSourceMap: false,
  // CSS相关配置
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/styles/variables.scss";
          @import "@/assets/styles/mixins.scss";
        `
      }
    }
  },
  // 插件相关配置
  pluginOptions: {
    // ...
  }
};