Vue3 vue.config.js配置

发布时间:2023-04-22 16:30

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>'
      },
      ...
    }
  }

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号