vue.config.js常用配置项

拼搏现实的明天。 2022-12-02 13:42 156阅读 0赞

常用配置项：

<table> 
 <thead> 
  <tr> 
   <th align="left">配置项</th> 
   <th align="left">说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>更多</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">publicPath</td> 
   <td align="left">设置部署应用包时的基本 URL</td> 
   <td>String</td> 
   <td>‘/’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819462" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">outputDir</td> 
   <td align="left">设置项目打包生成的文件的存储目录</td> 
   <td>String</td> 
   <td>‘dist’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819648" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">assetsDir</td> 
   <td align="left">指定放置打包生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir)</td> 
   <td>String</td> 
   <td>‘’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819648" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">indexPath</td> 
   <td align="left">设置生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径</td> 
   <td>String</td> 
   <td>‘index.html’</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105819648" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">filenameHashing</td> 
   <td align="left">设置打包生成的静态资源的文件名中是否加入hash，控制浏览器缓存</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105820035" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">lintOnSave</td> 
   <td align="left">设置是否在开发环境下每次保存代码时都启用 eslint验证</td> 
   <td>Boolean/String</td> 
   <td>true</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105831476" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">configureWebpack</td> 
   <td align="left">对内部的webpack配置的进行新增与修改</td> 
   <td>Object/Function</td> 
   <td>function</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105831476" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">chainWebpack</td> 
   <td align="left">对内部的webpack配置的进行新增与修改（链式操作）</td> 
   <td>Function</td> 
   <td>function</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105831476" rel="nofollow">详情</a></td> 
  </tr> 
  <tr> 
   <td align="left">devServer</td> 
   <td align="left">NodeJs架设起临时的服务器用于项目的运行与调试</td> 
   <td>Object</td> 
   <td>见下</td> 
   <td><a href="https://blog.csdn.net/weixin_44869002/article/details/105864712" rel="nofollow">详情</a></td> 
  </tr> 
 </tbody> 
</table>

开发服务器devServer有许多属性：

devServer: { 
        inline: true, // 用于设置代码保存时是否自动刷新页面
        hot: true, // 设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
        open: false, // 设置 server 启动后是否自动打开浏览器
        openPage: '', // 指定deserver 编译完成后自动打开的页面
        https: false, // 设置是否启用https
        port: 8080, // 设置要监听的端口号
        host: 'localhost', // 指定devDerve使用的host，localhost
        compress: true, // devServer 所有服务启用 gzip 压缩
        overlay: false, // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
        // 设置API访问代理,.proxy 一定要设置 target
        proxy: { 
          '/api': { 
            target: 'http://localhost:5000',
            changeOrigin: true
          }
        }
      }