Skip to content
On this page

🦊 vue.config.js文件配置说明

在日常开发学习中,vue项目中vue.config.js文件的使用可能有点模糊,我看了一些文章总结了一些常用的配置项。以下是常见案例整理,一起看看吧....

javascript
module.exports = {
    /* 部署应用包的基本URL */
    /* baseUrl 从 Vue CLI 3.3 起已弃用 ,请使用publicPath */
    //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    /* 生产环境构建文件的目录 defalut: dist */
    outputDir: "dist",
    /* 放置生成的静态文件目录(js css img) */
    assetsDir: "static",
    /* 指定生成的index.html 输出路径 相对 default: index.html */
    indexPath: "index.html",
    /* 指定生成文件名中包含hash default: true */
    filenameHashing: true,
    /* 是否保存时 lint 代码 */
    lintOnSave: process.env.NODE_ENV === "production",
    /* 是否使用编译器 default: false */
    runtimeCompiler: false,
    /* 默认babel-loader会忽略node_modules中的文件,你想显示的话在这个选项中列出来 */
    // transpileDependencies: [],
	/* 生产环境的source map */
	// 禁止console
	drop_console: true,
	// 禁止debug语句
	drop_debugger: true,
    productionSourceMap: true,
    // crossorigin: "",
    integrity: false,
    configureWebpack: {
       resolve: {
        alias: {
          'assets': '@/assets',
          'components': '@/components',
          'views': '@/views',
        }
      }
    },
    // css相关配置
    css: {
      // 是否使用css分离插件 ExtractTextPlugin
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
      // 启用 CSS modules for all css / pre-processor files.
      modules: false
    },
    devServer: {
      port: 8080,
      host: "0.0.0.0",
      https: false,
      // 自动启动浏览器
      open: false,
      proxy: {
        "/api": {
            //代理路径 例如 https://baidu.com
            target:  "https://baidu.com",
            // 将主机标头的原点更改为目标URL
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": ""
            }
          }
      }
    }
};
  • 好了,以上的总结就到此为止了,如果有疑问可以不问也可以联系作者。咱们下期再见! Good bye! 🌸

Released under the MIT License.