vite配置详解

随着前端技术的发展，越来越多的前端项目采用VUE、React等前端框架进行开发。而vite作为一款基于ES6模块服务器的构建工具，被越来越多的开发者所使用。本文将从多个方面对vite配置做详细的阐述，帮助开发者更好地使用vite构建前端项目

一、vite配置跨域

在前端项目中，不可避免地需要与后端接口进行交互。由于同源策略的限制，我们需要进行跨域设置。在vite项目中，可以通过配置文件解决跨域问题。以下是一个简单的跨域配置示例：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
}

以上配置的含义是将所有以/api开头的请求转发到http://localhost:3000上。其中rewire属性的作用是将请求路径中的/api去掉，这样就能顺利地转发到后端API服务器了。

二、vite配置两个访问地址

vite将运行地址和构建后的地址分离开来，开发环境默认运行在localhost:3000，在浏览器地址栏中输入localhost:5000或localhost:3000可以访问到同一个页面，便于开发和调试。下面是相关配置：

export default {
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    assetsInlineLimit: 4096,
  }
}

三、vite配置vue

对于使用vue进行开发的项目，需要进行相关配置才能运行。以下是相关配置：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

在代码中引入vue，并创建vue实例。同时需要在vite.config.js中配置以下内容：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue()
  ]
}

四、vite配置输出路径

在vite中，可以通过设置outDir来配置输出路径。例如：

export default {
  build: {
    outDir: 'dist',
  }
}

以上配置意味着运行vite build命令时，输出文件将会存在dist文件夹下。

五、vite配置cdn

对于一些通用的库如Vue、React、Lodash等，我们可以将其引用地址替换为CDN资源地址，以提高打包构建的速度和减少前端资源的下载。以下是相关配置：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
}

六、vite配置代理

在开发过程中，我们往往需要连接后端服务器进行开发、调试。为了方便调试，我们可以将请求代理到后端服务器，避免跨域等问题。以下是相关配置：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

七、vite配置axios

对于需要发送请求的项目，我们可以使用Axios来实现HTTP请求。以下是相关配置：

import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

八、vite配置环境变量

在不同的环境中，我们需要使用不同的参数，例如开发环境中需要使用开发服务器的地址，而线上环境中则需要使用线上服务器的地址。这时我们就需要使用环境变量来实现不同环境参数的切换。以下是相关配置：

export default {
  define: {
    'process.env': {
      BASE_URL: process.env.NODE_ENV === 'production'
        ? '/production-sub-path/'
        : '/'
    }
  }
}

九、vite配置对象合并

当我们需要在多个对象之间拷贝属性时，我们可以使用对象合并。在vite中，对象合并可以通过插件来实现。以下是相关配置：

import merge from 'deepmerge'

export default {
  plugins: [
    {
      name: 'merge-config',
      config(config) {
        return merge(config, {
          build: {
            cssCodeSplit: false
          }
        })
      }
    }
  ]
}

以上代码表示将build对象中的cssCodeSplit属性设置为false

通过以上详细的阐述，希望能够帮助到开发者更好地使用vite构建前端项目，提高开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/184320.html