vue3.0常用配置详解 vue.config.js

最新推荐文章于 2025-04-16 09:59:05 发布

半度℃温热

最新推荐文章于 2025-04-16 09:59:05 发布

阅读量2.3k

点赞数 5

分类专栏： Vue 文章标签： vue.js webpack proxy vue.config.js javascript

本文链接：https://blog.youkuaiyun.com/fu983531588/article/details/109333017

版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在Vue项目的根目录下创建vue.config.js文件来配置项目的基本参数，包括输出目录、静态资源目录、开发服务器配置等。还详细说明了如何进行跨域处理及第三方插件选项配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目文件下的根目录创建 vue.config.js

// 引入path
const path = require('path');
module.exports = {
  baseUrl: '', // 从 Vue CLI 3.3 起已弃用，请使用 publicPath
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // 输出文件目录
  outputDir: 'dist',
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
  // 指定生成的 index.html 的输出路径
  indexPath: 'index.html',
  // lintOnSave：{ type:Boolean default:true } 是否使用 eslint
  lintOnSave: true,
  // productionSourceMap：{ type:Bollean,default:true } 生产源映射
  // 如果不需要生产时的源映射，那么将此设置为 false 可以加速生产构建
  productionSourceMap: true,
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      sass: {
        prependData: `@import "~@/assets/css/custom.scss";` // 全局引入 scss 变量, 不用可以去掉
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  },
  // devServer: { type: Object } 3个属性 host, port, https, 它支持 webpack-dev-server 的所有选项
  devServer: {
    port: 8080, // 端口号
    host: 'localhost',
    https: false,
    open: false, // 配置自动启动浏览器
    overlay: { // 浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true
    },
    // 配置跨域处理
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
    	changeOrigin: true
      }
    }
  },
  // 用来传递任何第三方插件选项
  pluginOptions: {
  },
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : undefined,
    resolve: {
      // 目录别名配置
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    // 解决缓存问题
    output: {
      filename: `js/[name].${new Date().getTime()}.js`,
      chunkFilename: `js/[name].${new Date().getTime()}.js`
    }
  }
}