vue3中vite.config.js相关常用配置超详细讲解

袁朝旭

base（默认为/）开发或生产环境服务的公共基础路径。合法的值包括以下几种：
绝对 URL 路径名，例如 /foo/ 部署在根目录下的foo文件下页面路径为： https://foo.com/foo/
完整的 URL，例如 https://foo.com/（默认为/）部署在根目录下
空字符串或 ./（用于嵌入形式的开发） 可用于部署在任何路径下
** 注意点：**
== vue3 vite.config.js 中配置的base路径，当访问过程中需要使用动态连接的 url 时，可以使用全局注入的 import.meta.env.BASE_URL 变量，它的值为公共基础路径；vue2 中通过process.env.BASE_URL 获取 ==
plugins：插件列表，可以是自定义的Vite插件或第三方插件，用于扩展Vite功能
resolve：用于配置模块解析。例如，可以设置resolve.alias来设置路径别名，简化导入语句。
server：配置开发服务器。例如，可以设置server.port来指定端口，或者server.host来指定主机
build：配置构建输出

1. import path from 'node:path'
   
2. import { fileURLToPath } from 'node:url'
   
3. import { build } from 'vite'
   
4. import vue from '@vitejs/plugin-vue'
   
5. const __dirname = fileURLToPath(new URL('.', import.meta.url))
   
6. export default defineConfig({
   
7.   base: '/screen',//指定了应用程序在服务器上的根目录位置，设置连接前缀
   
8.   plugins: [
   
9.     vue(),
   
10.   ],
    
11.   resolve: {
    
12.     alias: {
    
13.       '@': fileURLToPath(new URL('./src', import.meta.url))
    
14.     }
    
15.   },
    
16.    server: {
    
17.     open: '/docs/index.html',//开发服务器启动时，自动在浏览器中打开应用程序。
    
18.     proxy: {//代理
    
19.        port: 3000,
    
20.        host: 'localhost',
    
21.        cors： true,//为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
    
22.       // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
    
23.       '/foo': 'http://localhost:4567',
    
24.       // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
    
25.       '/api': {
    
26.         target: 'http://jsonplaceholder.typicode.com',
    
27.         changeOrigin: true,
    
28.         rewrite: (path) => path.replace(/^\/api/, ''),
    
29.       },
    
30.       build: {
    
31.         outDir: 'dist',//指定输出路径（相对于 项目根目录).
    
32.         assetsDir: 'assets',//指定生成静态资源的存放路径
    
33.             rollupOptions: {
    
34.               // ...
    
35.             }
    
36.   }
    
37. })

复制代码

总结
到此这篇关于vue3中vite.config.js相关常用配置超详细讲解的文章就介绍到这了,更多相关vue3 vite.config.js常用配置内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！