【转】[Vue] vue.config.js 文件介绍

来自：kimi.ai

 

vue.config.js 是 Vue CLI 项目中的一个可选配置文件，用于自定义项目的构建配置。通过这个文件，开发者可以覆盖 Vue CLI 默认的配置，从而满足项目的特定需求。以下是关于 vue.config.js 的详细介绍，包括它的用途、配置选项以及如何使用它。

1. 用途

vue.config.js 的主要用途是为 Vue CLI 项目提供自定义配置。它允许开发者调整以下内容：

• 构建路径：自定义输出目录、静态资源路径等。
• 开发服务器：配置开发服务器的端口、代理、热重载等。
• 构建插件：添加或修改 Webpack 插件。
• 环境变量：定义环境变量。
• 链式配置：对 Webpack 配置进行更细粒度的调整。

2. 创建 vue.config.js

如果项目中没有 vue.config.js 文件，你可以手动创建一个。它应该位于项目的根目录下。例如：

JavaScript复制

// vue.config.js
module.exports = {
  // 配置项
};

3. 常见配置选项

3.1 输出目录

通过 outputDir 和 assetsDir 配置输出目录和静态资源路径：

JavaScript复制

module.exports = {
  outputDir: 'dist', // 构建输出目录，默认为 'dist'
  assetsDir: 'static', // 静态资源目录，默认为空
};

3.2 开发服务器

配置开发服务器的端口、代理等：

JavaScript复制

module.exports = {
  devServer: {
    port: 8080, // 端口号
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理目标地址
        changeOrigin: true, // 是否改变请求的来源
      },
    },
  },
};

3.3 构建插件

添加或修改 Webpack 插件：

JavaScript复制

module.exports = {
  configureWebpack: {
    plugins: [
      // 添加自定义插件
      new MyCustomWebpackPlugin(),
    ],
  },
};

3.4 环境变量

定义环境变量：

JavaScript复制

module.exports = {
  define: {
    'process.env.MY_CUSTOM_VAR': JSON.stringify('my-value'),
  },
};

3.5 链式配置

使用 chainWebpack 进行更细粒度的 Webpack 配置：

JavaScript复制

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => {
        // 修改 vue-loader 的配置
        return options;
      });
  },
};

4. 其他配置项

以下是 vue.config.js 中的一些其他常用配置项：

4.1 生产环境的 source map

JavaScript复制

module.exports = {
  productionSourceMap: false, // 生产环境是否生成 source map
};

4.2 CSS 相关配置

JavaScript复制

module.exports = {
  css: {
    extract: true, // 是否将 CSS 提取为单独的文件
    sourceMap: false, // 是否为 CSS 生成 source map
    loaderOptions: {
      // 为 CSS 相关的 loader 提供选项
      scss: {
        prependData: `@import "@/styles/variables.scss";`,
      },
    },
  },
};

4.3 Babel 配置

JavaScript复制

module.exports = {
  transpileDependencies: ['some-dependency'], // 需要 Babel 转译的依赖
};

5. 示例

以下是一个完整的 vue.config.js 示例：

JavaScript复制

// vue.config.js
module.exports = {
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'static', // 静态资源目录
  devServer: {
    port: 8080, // 端口号
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理目标地址
        changeOrigin: true, // 是否改变请求的来源
      },
    },
  },
  configureWebpack: {
    plugins: [
      // 添加自定义插件
      new MyCustomWebpackPlugin(),
    ],
  },
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => {
        // 修改 vue-loader 的配置
        return options;
      });
  },
  css: {
    extract: true, // 是否将 CSS 提取为单独的文件
    sourceMap: false, // 是否为 CSS 生成 source map
    loaderOptions: {
      scss: {
        prependData: `@import "@/styles/variables.scss";`,
      },
    },
  },
  productionSourceMap: false, // 生产环境是否生成 source map
  transpileDependencies: ['some-dependency'], // 需要 Babel 转译的依赖
};

6. 使用环境变量

在 vue.config.js 中，你可以使用环境变量来区分不同的运行环境。例如：

JavaScript复制

module.exports = {
  devServer: {
    port: process.env.PORT || 8080,
  },
};

7. 注意事项

• 配置文件的命名：文件名必须是 vue.config.js，并且位于项目根目录下。
• 配置项的覆盖：vue.config.js 中的配置项会覆盖 Vue CLI 默认的配置。
• 调试配置：如果你不确定配置是否生效，可以运行 vue-cli-service inspect 查看最终的 Webpack 配置。

8. 总结

vue.config.js 是 Vue CLI 项目中的一个强大工具，允许开发者自定义项目的构建配置。通过合理使用它，你可以满足项目的特定需求，优化开发和生产环境的配置。

---

在 JavaScript 中，"use strict"; 是一个指令，用于将代码置于 严格模式（Strict Mode） 下运行。严格模式对 JavaScript 的语法和行为施加了更严格的限制，旨在减少一些常见的错误和不严谨的代码行为，同时提高代码的可读性和可维护性。

在 Vue 项目中，vue.config.js 是一个可选的配置文件，用于自定义 Vue CLI 项目的构建配置。如果你在 vue.config.js 文件的第一行写上 "use strict";，它会对整个文件启用严格模式。

"use strict"; 的作用

以下是启用严格模式后的主要影响：

1. 禁止使用未声明的变量

在非严格模式下，直接赋值给未声明的变量会自动创建一个全局变量。在严格模式下，这种行为会导致语法错误。

非严格模式：

JavaScript复制

x = 5; // 自动创建全局变量 x

严格模式：

JavaScript复制

"use strict";
x = 5; // 抛出 ReferenceError: x is not defined

2. 禁止删除变量

在严格模式下，不能使用 delete 操作符删除变量。

非严格模式：

JavaScript复制

var x = 5;
delete x; // 删除变量 x

严格模式：

JavaScript复制

"use strict";
var x = 5;
delete x; // 抛出 SyntaxError: Delete of an unqualified identifier in strict mode.

3. 禁止使用 with 语句

with 语句在非严格模式下允许动态作用域，但在严格模式下被禁止，因为它可能导致代码难以理解和维护。

非严格模式：

JavaScript复制

var obj = { a: 1 };
with (obj) {
  console.log(a); // 输出 1
}

严格模式：

JavaScript复制

"use strict";
var obj = { a: 1 };
with (obj) {
  console.log(a); // 抛出 SyntaxError: Strict mode code may not include a with statement
}

4. 禁止使用 eval 创建变量

在严格模式下，eval 不能创建变量或函数。

非严格模式：

JavaScript复制

eval("var x = 5;");
console.log(x); // 输出 5

严格模式：

JavaScript复制

"use strict";
eval("var x = 5;");
console.log(x); // 抛出 ReferenceError: x is not defined

5. 禁止使用 arguments.caller 和 arguments.callee

在严格模式下，arguments.caller 和 arguments.callee 是非法的。

非严格模式：

JavaScript复制

function f() {
  return arguments.callee;
}
console.log(f() === f); // 输出 true

严格模式：

JavaScript复制

"use strict";
function f() {
  return arguments.callee;
}
console.log(f() === f); // 抛出 TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

6. 提高代码的可读性和可维护性

严格模式强制开发者遵循更严格的编码规范，避免一些常见的错误和陷阱，从而提高代码的可读性和可维护性。

在 vue.config.js 中使用 "use strict"; 的意义

在 vue.config.js 文件中启用严格模式，可以帮助你避免一些常见的错误，例如：

• 防止意外创建全局变量。
• 避免使用不推荐的语法（如 with 和 eval）。
• 确保代码的逻辑更加清晰和严谨。

虽然 vue.config.js 是一个相对较小的配置文件，启用严格模式仍然是一个好习惯，尤其是在大型项目中，它可以减少潜在的错误和问题。

示例

JavaScript复制

// vue.config.js
"use strict";

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  lintOnSave: true
};

在这个例子中，"use strict"; 确保了整个 vue.config.js 文件都处于严格模式下运行。

总结

在 vue.config.js 文件中写上 "use strict";" 的作用是启用严格模式，从而对代码施加更严格的限制，帮助开发者避免一些常见的错误和陷阱，提高代码的可读性和可维护性。这是一个良好的编程习惯，尤其是在大型项目中。