vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴(yán)格遵照 JSON 的格式來寫。

以下是 vue.config.js 的一個(gè)基本配置：

module.exports = {
  // 部署應(yīng)用包時(shí)的基本 URL
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/',
  // 構(gòu)建輸出目錄
  outputDir: 'dist',
  // 靜態(tài)資源目錄
  assetsDir: 'static',
  // 生產(chǎn)環(huán)境 source map
  productionSourceMap: false,
  // 配置 Webpack
  configureWebpack: {
    // ...
  },
  // 配置 webpack-dev-server 行為。
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    // 代理
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    },
    // 提供在服務(wù)器內(nèi)部的其他中間件之前執(zhí)行自定義中間件的能力。
    before: app => {
      // ...
    }
  },
  // 從 v4.0.0 起已棄用，請(qǐng)使用publicPath
  baseUrl: '',
  // 在 multi-page 模式下構(gòu)建應(yīng)用
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  },
  // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本
  runtimeCompiler: false,
  // Babel 顯式轉(zhuǎn)譯列表
  transpileDependencies: [],
  // 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map？
  productionSourceMap: true,
  // 調(diào)整內(nèi)部的 webpack 配置。
  chainWebpack: () => {},
  // CSS 相關(guān)選項(xiàng)
  css: {
    // 將組件內(nèi)的 CSS 提取到一個(gè)單獨(dú)的 CSS 文件 (只用在生產(chǎn)環(huán)境中)
    // 也可以是一個(gè)傳遞給 `extract-text-webpack-plugin` 的選項(xiàng)對(duì)象
    extract: true,
    // 是否開啟 CSS source map？
    sourceMap: false,
    // 為預(yù)處理器的 loader 傳遞自定義選項(xiàng)。比如傳遞給
    // Css-loader 時(shí)，使用 `{ Css: { ... } }`。
    loaderOptions: {},
    // 為所有的 CSS 及其預(yù)處理文件開啟 CSS Modules。
    // 這個(gè)選項(xiàng)不會(huì)影響 `*.vue` 文件。
    modules: false
  }
};

這里只是列出了一些常用的配置項(xiàng)，更多詳細(xì)的配置可以參考官方文檔：https://cli.vuejs.org/zh/config/文章來源地址http://www.zghlxwxcb.cn/news/detail-606108.html

到了這里，關(guān)于vue.config.js配置詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！