例如,如果 base 被设置为 '/your-public-path/',那么构建后的所有静态资源都会从这个路径下加载。 publicPath 配置的示例 假设你有一个 Vue3 Vite 项目,并且你想要将应用部署到一个子路径下,比如 http://example.com/my-app/。你可以在 vite.config.js 中这样配置 publicPath: javascr
其中写环境变量和其它变量,必须要以VITE_开头 ( 若环境变量和其它变量不想以VITE_开头 如:以 APP_ 开头,则可以在 vite.config.ts 文件中添加 envPrefix: “APP_”) 全局环境.env文件 可以配置全局属性 # port 端口号 VITE_PORT= 8888# open 运行 npm run dev 时自动打开浏览器 VITE_OPEN=false# public ...
VITE_BASE_API='http://localhost/api'VITE_LOGIN_URL= 'http://localhost:8080/#/login'VITE_PUBLIC_PATH= ''# version VITE_VER_MAIN= '1'VITE_VER_SUB= '0.0'VITE_VER_STATE= 'dev' //环境变量需要以 VITE_ 开头 (只有以VITE_为前缀的变量才会暴露给经过 vite 处理的代码) 三、在代码中使用对应...
简介: 微前端-qiankun:vue3-vite 接入 vue3-webpack 一、背景 主应用:vue3、vite 主项目接入qiankun 子应用:vue3、webpack 二、代码-接入子应用 2.1、src/public-path.js if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } 2.2、...
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv return { plugins: [vue()], base: VITE_PUBLIC_PATH || '/', } }) vite配置 1. 配置项目根目录 项目根目录,也就是index.html所在的位置,一般情况下并不需要去修改它,确实有这个需求请参考Vite 官方中文文档 (vitejs.dev) ...
{// build 的配置项,读取环境变量中配置信息env=loadEnv(...)// 不同的构建需求,放在不同的.env文件中}else{// dev 的配置项,读取环境变量中配置信息env=loadEnv(...)}return{base:env.VITE_BASE_PATH,root:root,server:{port:env.VITE_PORT,host:true,// 使用 0.0.0.0|true 可监听所有地址open:...
VITE_PUBLIC_PATH 构建资源公共路径。 这个与 vue/cli 中的 publicPath 同理,有的时候你构建的项目并不是存放在跟路径下,例如http://ip:port/{项目名}。 4.3 封装静态资源文件 如果你配置了 VITE_APP_STATIC_URL 静态资源环境变量,那么你需要封装以下两个东西: ...
├── public ├── src ├── tsconfig.json ├── vite.config.ts └── yarn.lock 在根目录下新建一个/packages目录,后续组件的开发都会在该目录进行。以一个<my-button />组件为例,看看/packages目录内部是什么样的: packages ├── Button ...
在vite中,index.html已经从public文件夹迁移到项目的根目录下了,官方文档对此的解释为:在开发期间 Vite 是一个服务器,而index.html是该 Vite 项目的入口文件。 有关此变更的详细解释请移步:index.html 与项目根目录 接下来,我们在项目的根目录创建index.html文件(将public目录下的文件删除) ...
在vite.config.ts中配置: import { fileURLToPath, URL } from 'node:url' export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, }) 在tsconfig.json中配置: ...