vue.config.js 的完整配置（规则测试来啦）

た入场券 2024-04-01 06:23 50阅读 0赞

> 前段时间，对部门的个别项目进行`Vue3.0+ts`框架的迁移，刚开始研究的时候也是踩坑特别多，尤其我们的项目还有些特殊的`webpack`配置，所以，研究`vue.config.js`的配置的时候也是查阅了各种资料文档，最终，完成了项目`webpack`的特殊配置。

今天分享一下，我们项目当中的一些`webpack`配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的，尤其像插件的配置，都是十分相似的。

**我们现在开始进入今天的主题啦~~**

#### **1 介绍** ####

之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有`webpack.config.js`的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整`webpack`, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建`vue.config.js`去完成`webpack`的一些特殊配置,默认它会被 `@vue/cli-service` 自动加载。

此刻，你需要创建`vue.config.js`文件。

**查看默认的webpack配置**

> Vue CLI 官方文档：`vue-cli-service` 暴露了 `inspect` 命令用于审查解析好的 `webpack` 配置。那个全局的 vue 可执行程序同样提供了 `inspect` 命令，这个命令只是简单的把 ```vue-cli-service``inspect``` 代理到了你的项目中。

被抽象化的`webpack`，我们要想去理解它默认的一些配置的话是比较困难的，所以我们可以通过指令去查看。  
该指令会将`webpack`的配置输出到`output.js`文件，这样方便去查看。

vue inspect > output.js

**vue.config.js文件**

这个文件导出了一个包含了选项的对象：

module.exports = {
      // 选项...
    }

接下来，详细介绍一些选项及配置：

#### **2 基本配置** ####

module.exports = {
        productionSourceMap: false,
        publicPath: './',
        outputDir: 'dist',
        assetsDir: 'assets',
        devServer: {
            port: 8090,
            host: '0.0.0.0',
            https: false,
            open: true
        },
        // 其他配置
        ...

*  **productionSourceMap**：生产环境是否要生成 `sourceMap`
 *  **publicPath**：部署应用包时的基本 URL,用法和 `webpack` 本身的 `output.publicPath` 一致
    
     *  可以通过三元运算去配置`dev`和`prod`环境, `publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'`
 *  **outputDir**: `build` 时输出的文件目录
 *  **assetsDir**: 放置静态文件夹目录
 *  **devServer**: dev环境下，`webpack-dev-server` 相关配置
    
     *  **port**: 开发运行时的端口
     *  **host**: 开发运行时域名，设置成`'0.0.0.0'`,在同一个局域网下，如果你的项目在运行，同时可以通过你的`http://ip:port/...访问你的项目`
     *  **https**: 是否启用 `https`