Vue.js “vue.config.js”文件在哪里

在本文中，我们将介绍Vue.js中的”vue.config.js”文件的位置和用途。”vue.config.js”是一个可选的配置文件，用于对Vue项目进行个性化的配置。

阅读更多：Vue.js 教程

“vue.config.js”文件的位置

在Vue项目中，”vue.config.js”文件应该位于项目的根目录下。如果该文件不存在，则说明项目使用了默认的配置。

在项目根目录下创建一个名为”vue.config.js”的文件，并在该文件中进行自定义配置。这个文件将会在项目构建过程中被自动加载，从而影响到最终的构建结果。

“vue.config.js”文件的作用

“vue.config.js”文件用于配置和自定义Vue项目的各种构建和开发相关的参数。

以下是一些常见的配置项和示例说明：

publicPath

publicPath用于指定发布路径，即将静态资源发布到的路径。默认情况下，Vue项目的静态资源（例如图片、字体等）将会相对于HTML页面所在的路径进行定位。但在某些情况下，我们可能希望将静态资源发布到CDN或其他静态资源服务器上。

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
};

outputDir

outputDir用于指定项目的输出目录，默认为”dist”。可以通过指定outputDir来更改输出目录名称或指定输出目录的相对路径。

// vue.config.js
module.exports = {
  outputDir: 'my-dist'
};

devServer

devServer用于配置开发服务器的相关参数，例如监听端口、代理等。

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

css

css配置项用于配置CSS相关的参数，例如是否启用CSS预处理器、是否开启CSSSourceMap等。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/styles/variables.scss";'
      },
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#ff0000'
          },
          javascriptEnabled: true
        }
      }
    }
  }
};