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]: "",
        },
      },
    },
  },

你可能感兴趣的:(webpack,vue,javascript,前端,vue.js)