随着前端技术的发展,越来越多的前端项目采用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构建前端项目,提高开发效率。