vite.config.js常用配置

//预览设置  npm run build 打包之后,会生成dist文件 然后运行npm run preview;vite会创建一个服务器来运行打包之后的文件
    preview:{
        port: 4000,//端口号
        host: 'localhost',
        open: true,//是否自动打开浏览器
    },
    //开发配置  npm run dev
    server: {
        port: 3001,//端口号
        strictPort: true,//是否是严格的端口号,如果true,端口号被占用的情况下,vite会退出
        host: 'localhost',
        cors: true,//为开发服务器配置 CORS , 默认启用并允许任何源
        https: false,//是否支持http2 如果配置成true 会打开https://localhost:3001/xxx;
        open: true,//是否自动打开浏览器
        // 反向代理 跨域配置
        proxy: {
            '/api': {
                target: "https://xxxx.com/",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    // 打包配置 npm run build
    build:{
        //指定输出路径
        outDir: "dist",
        //生成静态资源的存放路径
        assetsDir: "assets",
        //小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项
        assetsInlineLimit: 4096,
        //启用/禁用 CSS 代码拆分
        cssCodeSplit: true,
        //构建后是否生成 source map 文件
        sourcemap: false,
        //自定义底层的 Rollup 打包配置
        rollupOptions: {
            input:{//可以配置多个,表示多入口
                index:path.resolve(__dirname,"index.html"),
                // project:resolve(__dirname,"project.html")
            },
            output:{
                // chunkFileNames:'static/js/[name]-[hash].js',
                // entryFileNames:"static/js/[name]-[hash].js",
                // assetFileNames:"static/[ext]/name-[hash].[ext]"
            }
        },
        //默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录。
        emptyOutDir: true,
        //chunk 大小警告的限制
        chunkSizeWarningLimit: 500
    }

补充:在vue.config.js中配置略有不同

 devServer: {
    port: 8888, //端口号,如果端口号占用,自动提升1
    host: "localhost", //主机名
    https: false, //协议
    open: true, //启动服务时自动打开浏览器访问
    proxy: {
      //开发环境代理配置
      // "/dev-api":{
      [process.env.VUE_APP_BASE_API]: {
        //目标服务器地址
        target: process.env.VUE_APP_SERVICE_URL,
        changeOrigin: true, //开启代理服务器
        pathRewrite: {
          //将请求地址前缀 /dev-api 替换为空的
          // '^/dev-api':'',
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
      [process.env.VUE_APP_FILE_API]: {
        //目标服务器地址
        target: process.env.VUE_SERVER_IP_PORT,
        changeOrigin: true, //开启代理服务器
        pathRewrite: {
          //将请求地址前缀 /dev-api 替换为空的
          // '^/dev-api':'',
          ["^" + process.env.VUE_APP_FILE_API]: "",
        },
      },
    },
  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kevin李宏飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值