Vue3 vue.config.js配置

桂和同

2023-12-01

vue.config.js是一个可选的文件，如果有的话在项目启动的时候会自动加载

这个文件把所有的配置项导出去

module.exports = {
    ...   
}

如果想要用ts注解的话 @vue/cli-service 里有 defineConfig函数专门注解配置项

1 publicPath

项目部署的地址

publicPath: process.env.NODE_ENV === 'production' ? '生产环境地址' : '开发环境地址',

2 outputDir

项目的打包地址，默认放到根目录的dist文件中

const { resolve } = require('path')
module.exports = defineConfig({
  ...
  outputDir: resolve(__dirname, '指定的地址'),
  ...
})

3 assetsDir

打包之后静态资源（js，css，img，fonts...）的地址，默认放到dist中（如果地址改变，构建时会把dist里的静态资源删掉）

assetsDir:process.env.NODE_ENV === 'production'? '../static' : '' 
//因为该资源是相对于dist的，所以用 '../'

4 indexPath

打包后 index.html 的地址，默认也是放在dist中（同样会删掉dist里的index.html）

indexPath: process.env.NODE_ENV === 'production'? '../index.html' : ''
// 这里不但要指定地址还要指定文件名，拓展名

5 filenameHashing

给静态资源添加一个hash，默认为ture添加，，以便更好的控制缓存

filenameHashing: false // 取消hash

6 pages

构建单页面应用时配置入口文件（感觉好像并没有用，用路由就可以实现，但是小程序里使用了pages）

pages: {
    index: { // index就是该项目的入口文件
      entry: 'js地址',
      template: 'html地址',
      title: '页面title'
    },
    page2: {
      entry: 'js地址',
      template: 'html地址',
      title: '页面title'
    }
  }

7 lintOnSave

是否在保存代码的时候提示lint编译警告，有4个参数 boolean | 'warning' | 'default' | 'error'

默认为 'default' ，如果希望代码规范设为true即可

8 runtimeCompiler

控制在入口文件main.js中能否使用template，默认为false如果使用了会增加10kb左右容量

9 transpileDependencies

控制转译那些node_modules文件，默认false忽略全部，true全部转移，可以传一个数组来选择指定的文件

10 configureWebpack,chainWebpack

用于配置webpack，不要再webpack.config.js里改代码，对于webpack的改动都再这里写,最终都会合并到webpack中，两者并没有什么本质的区别，前者不管是传一个对象又或是传一个函数配置项都是key：value或对象形式，后者提供更为细粒度地控制配置，可以像jQuery一样的链式配置。

一些官方提供的实例：

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }

  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
      ...
  }

11 css.requireModuleExtension

默认为true，css模块化的时候只有 *.moudle.css 形式才生效，如果有其他形式就可以把这个配置项设为false

12 css.extract

开发环境默认是false，生产环境默认为true

作用是是否提取css，众所周知开发环境每个文件自己导入css不需要，生产环境打包的时候全部整合成一个css文件，这个配置项可以改变他们，虽然不知道有什么用就是了。。。

13 css.sourceMap

默认为false 开启后会在检查里给出css样式在文件中的位置，开启后会影响构建性能

14 css.loaderOptions

配置css相关的loader，configureWebpack,chainWebpack也可以配置，但是官方推荐用这个

css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  }

支持的loader：

css-loader
postcss-loader
sass-loader
less-loader
stylus-loader

还可以进行其他配置，例如传入全局共享变量

css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }

15 devServer

用来配置开发环境的本地服务器，主要用途是跨域请求，因为同源策略只是针对浏览器而言的，不能阻拦服务器的请求，通过让本地服务器去获取数据自然就没有跨域问题。

devServer: {
    proxy: {
      '/api': { 
        target: '<url>',          // 想要请求的url地址
        ws: true,                 // 是否要开启代理
        changeOrigin: true,
        // 是否保留host头，默认为false，如果为false，就会保留，为true会覆盖
        forward： 'xxx',          // 官方给出的解释跟target一致，没用过...
        // 下边都是官方给的解释...
        xfwd: true/false,         // 添加x-forwar标头
        secure：true/false,       // 是否验证SSL Certs
        toProxy：true/false,      // 传递绝对URL作为路径（对代理代理很有用）
        prependPath：true/false,  // 默认值:true 指定是否将目标的路径添加到代理路径
        ignorePath：true/false,   // 默认值:false 指定是否忽略传入请求的代理路径
        localAddress："xxx",      // 要为传出连接绑定的本地接口字符串
        agent：{},                // 传递给http(s).request的对象
        ssl：{},                  // 传递给https.createServer()的对象
      },
      '/api2': {
        target: '<other_url>'
      },
      ...
    }
  }