Vite常用基本配置 { root: process.cwd(),//项目根目录(index.html 文件所在的位置),base:'/',//开发或生产环境服务的公共基础路径 配置引入相对路径mode:'development',//模式plugins: [vue()],//需要用到的插件数组publicDir:'public',//静态资源服务的文件夹cacheDir:'node_modules/.vite',//存储缓存文...
配置开发服务器的根路径。 例如,设置base: '/myapp/',则开发服务器将从http://localhost:3000/myapp/提供服务。 生产环境: 配置打包后资源的公共路径。 生成的 HTML 文件中,所有资源的引用路径都会基于这个base。 设置方法 在vite.config.js中设置: exportdefault{base:'/myapp/'} 常见用法 根路径: 默认情况下...
1vite配置文件的base属性 ~ ~ ~ 1
base: '/' 配置: exportdefaultdefineConfig({base:'/',plugins:[vue()],build:{outDir:'dist',rollupOptions:{input:{main:resolve(__dirname,'index.html')}}}); 构建后的 HTML 可能包含: <scripttype="module"src="/assets/main.js"></script><linkrel="stylesheet"href="/assets/main.css"> bas...
在Vite 中,base配置项通常用于设置部署时的基础路径(Base URL)。如果你在本地开发时配置了base,并且发现请求时 URL 总是包含这个基础路径,但你的意图是仅在生产环境中使用它,这通常是因为你的开发服务器也使用了这个配置。 解决方案 确保只在生产环境中设置base: ...
动态配置Vite的base选项 有的时候项目需要部署在服务器的子目录下,这时就要根据开发环境或生产环境动态配置vite.config.ts中的base选项。 查看vscode的TS类型提示: 可以发现:defineConfig接收一个UserConfig对象,或者一个返回UserConfig对象的函数,这个函数接收一个ConfigEnv对象作为参数,ConfigEnv的类型声明如下:...
这样一来,我们就解决了生产环境下静态资源失效的问题。不过,一般情况下,我们会将静态资源部上传到 CDN 上,并且将 Vite 的 base 配置为域名前缀,这样我们可以通过 CDN 直接访问到静态资源,而不需要加上服务端的处理。 四、工程化问题 以上我们基本实现了 SSR 核心的构建和运行时功能,可以初步运行一个基于 Vite 的...
Vite配置 // vite.config.jsimport { defineConfig } from'vite';import vue from'@vitejs/plugin-vue'; // 假设我们使用Vueimport { resolve } from'path';// 环境变量const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';exportdefaultdefineConfig({// 应用的基础路径base: '/...
BASE_URL:部署应用时的基本 URL,在 vite 的配置文件vite.config.ts中的base属性指定; PROD:是否是生产环境(即是否通过vite build构建) DEV:是否是开发环境(即是否通过vite启动服务运行) SSR:是否是服务端渲染模式。 1.2 production 首先执行yarn build打包(本质上是执行vite build),打包完成后通过yarn preview对打包...