vue.config.js配置extract

在 vue.config.js 文件中，可以使用 extractCSS 选项来配置是否将 CSS 代码提取到单独的文件中。通过设置 extractCSS 为 true，可以将所有的 CSS 提取到一个单独的 CSS 文件中。默认情况下，该选项是开启的。

下面是一个示例的 vue.config.js 文件配置，用于提取 CSS：

module.exports = {
  css: {
    extract: true
  }
}

这样配置后，在构建项目时，Vue CLI 将会把所有的 CSS 提取到一个单独的文件，并在 HTML 中使用<link>标签引入。这有助于减少页面加载时间并提高性能。

相关问题

vue.config.js配置

vue.config.js是一个可选的配置文件，用于配置Vue CLI创建的项目。它允许您修改默认配置，以满足特定的项目需求。

以下是一些常见的vue.config.js配置选项：

1. publicPath：指定公共资源路径，如CDN地址。
2. outputDir：指定打包输出目录。
3. assetsDir：指定放置生成的静态资源目录。
4. devServer：配置开发服务器选项，如端口号、代理等。
5. productionSourceMap：是否在生产环境中生成sourcemap文件。
6. configureWebpack：自定义webpack配置。
7. chainWebpack：基于webpack-chain的链式操作webpack配置，可以更细粒度地控制webpack配置。
8. css：配置CSS相关选项，如是否启用CSS分离、是否开启CSS source map等。

您可以在项目根目录下创建一个vue.config.js文件，并添加上述选项进行配置。例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  },
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new MyPlugin()
    ]
  },
  css: {
    extract: true,
    sourceMap: false
  }
}

vue.config.js配置webpack

Vue CLI通过vue.config.js文件来配置webpack。你可以在项目根目录下创建一个名为vue.config.js的文件，并在其中导出一个对象来配置webpack。

下面是一个示例的vue.config.js文件：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/',

  // 输出文件目录
  outputDir: 'dist',

  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',

  // 是否开启eslint保存检测，有效值：true | false | 'error'
  lintOnSave: process.env.NODE_ENV !== 'production',

  // webpack配置
  configureWebpack: {
    // 自定义webpack配置
  },

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,

  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,

    // 开启 CSS source maps?
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      sass: {
        // 设置全局scss变量
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  },

  // webpack-dev-server 相关配置
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },

  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

你可以根据需要在该文件中配置各种选项来定制webpack行为。更多详细的配置选项可以查阅Vue CLI官方文档。