欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuecli3.x 的 配置文件 vue.config.js

程序员文章站 2022-05-17 21:05:54
...

上传一个 vuecli3.x 的一个常用 vue.config.js 配置文件,希望对大家能有所帮助

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production'
    ? ''
    : '/',

  // 生产环境构建文件的目录 defalut: dist
  outputDir: 'dist',

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: '',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  indexPath: 'index.html',

  // 指定生成文件名中包含 hash default: true,如果你无法使用VueCLI生成的 index HTML,你可以通过将这个选项设为false来关闭文件名哈希
  filenameHashing: true,

  // 是否保存时 lint 代码  在生产构建时禁用 eslint-loader
  lintOnSave: process.env.NODE_ENV === 'production',

  /* 是否使用编译器 default: false */
  runtimeCompiler: false,

  // 打包时是否生成 .map 文件,defalut: true,设为 false 可加速打包
  productionSourceMap: true,

  // 上下两种方式,看自己习惯
  // Type: Object | Function
  // configureWebpack: {
  //   resolve: {
  //     alias: {
  //       'assets': '@/assets',
  //       'components': '@/components'
  //     }
  //   }
  // },
  chainWebpack: config => {
    // 设置快捷路径, @ 表示 'src' ,_c 表示 'src/components'
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))

    // 设置添加loader
    // 此处以 iview 的配置 loader 为例,解决 Vue 限制的两个标签 Switch 和 Circle
    /* config.module
      .rule('vue')
      .use('iview')
      .loader('iview-loader')
      .option({ prefix: false }) */
  },

  // css相关配置
  css: {
    /* 启用 CSS modules for all css / pre-processor files. */
    modules: false,
    /* 是否使用css分离插件 Default: 生产环境下是 true,开发环境下是 false */
    extract: true,
    /* 开启 CSS source maps? */
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      sass: {
        // 这里的选项会传递给 sass-loader 假设你有 `src/variables.scss` 这个文件
        // data: `@import "[email protected]/variables.scss";`
      }
    }
  },

  // webpack-dev-server 相关配置
  devServer: {
    // 端口号
    port: 8080,
    // 是否自动启动浏览器
    open: false,
    // 配置跨域
    proxy: {
      /* '/api': {
        // 代理路径 例如 https://baidu.com
        target: 'https://baidu.com',
        // 将主机标头的原点更改为目标URL
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        } */
    }
    /* 配置多个跨域
    '/foo': {
      target: '<other_url>'
    } */
  },
  // PWA 插件
  pwa: {},
  // 第三方插件配置
  pluginOptions: {}
}