Vue++:Vue-cli4.x 的配置文件配置方法

它不同于vue-cli2.x的配置方法,将所有的配置文件的文件建好,而是将好多配置已经配置好,如果想修改默认的配置,需要在项目的根路径下面新建一个vue.config.js文件。

如下所示:

 在vue.config.js文件中的配置大概如下:

复制代码
const webpack = require("webpack");
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
require("babel-polyfill");
module.exports = {
    publicPath: './',//打包后的位置(如果不设置这个静态资源会报404)
    // publicPath: process.env.NODE_ENV === 'production' ? 'http://47.92.237.225:8080/dist' : './',
    outputDir: 'dist',//打包后的目录名称
    assetsDir: 'static',//静态资源目录名称
    productionSourceMap:false,  //去掉打包的时候生成的map文件
    lintOnSave: true,
    filenameHashing: false,
    devServer: {
      sockHost: 'http://47.92.237.225:1111/',
      disableHostCheck: true,
      host: '0.0.0.0',  //不清楚主机和目的网络
      port: 1111, // 源地址端口,自行修改
      disableHostCheck: true,
      hotOnly: false,
      useLocalIp: false,
      proxy: {
        '/ser':{
            target:'http://127.0.0.1:8080/',  //跨域的域名
            ws: true,  // 代理 websockets
            changeOrigin: true, //是否开启跨域
            pathRewrite:{
                '^/ser':'/'  // 重写地址
            }
        }
      headers: {
        'Access-Control-Allow-Origin': '*',
      }
    },
    configureWebpack: {
      plugins: [
        // 配置jquery
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery",
          Popper: ["popper.js", "default"]
        }),
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),  //匹配文件名
          // test: /\.js$|\.html$|.\css/,
          threshold: 10240,  //对超过10k的数据压缩
          minRatio: 0.8,
          deleteOriginalAssets: false  //不删除源文件
          })
      ]
    }
  }
复制代码

 

posted @   coding++  阅读(122)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示