解决Vite无法获取env环境变量的问题

在使用Vite 5时，出现使用import.meta.env仅包含默认的一些环境变量，无法获取到在.env文件定义的环境变量的问题。 查阅 官方文档 有以下说明： Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。 因此，需要在vite.config.js中手动定义所需的环境变量。例如获取.env文件中的VITE_MY_APP_ENV变量，可…

 2024-09-14  

Vue项目ChunkLoadError报错解决

问题信息 近期项目出现大量以下这种类型的报错，显示该js文件找不到，并且用户反馈点击后整个页面卡住，但是刷新页面后就不会再报错： ChunkLoadError Loading chunk chunk-9f35075c failed. (missing: https://***.com/js/chunk-9f35075c.4032e0dc.js) 以及下面这种报错： SyntaxError Unexpected token '<' 问题分析 尝试直接访问该链接，也是出现文件不存在的情况，而被伪静态规则转发访问到首页，chunk loader加载后发现不是正确的js文件，报…

 2022-10-29  

修复date-fns-tz导入失败问题

在执行yarn build打包node项目时，出现以下错误： [vite]: Rollup failed to resolve import "date-fns/_lib/cloneObject/index.js" from "node_modules/date-fns-tz/esm/formatInTimeZone/index.js". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to `build.rollupOptions.external` error during build: Error: [vite]: Rollup failed to resolve import "date-fns/_lib/clon…

 2022-09-23  

vite项目在二级目录下的部署

使用history路由模式，假定项目在admin目录下，需要使用类似于如下url访问： https://myapp.com/admin/auth/login https://myapp.com/admin/dashboard 修改 公共基础路径，适配静态文件。 vite.config.js export default defineConfig({ base: '/admin/', // ... }); 修改路由前缀，内部路由跳转时追加上前缀。 src/router/index.ts const router = createRouter({ history: createWebHistory('/admin/'), routes }) Nginx 配置。 location /admin { …

 2021-11-29  

使用oss与van-uploader实现heif格式图片上传支持

近期在做一个涉及上传手机图片的项目，用户上传的heic/heif格式图片均无法正常在浏览器中预览。 实际显示如下： 在 caniuse.com 网站中，可见目前主流浏览器均还不支持heic/heif格式的图片。 解决方案 使用oss图片处理 考虑到在前端进行转换有可能遇到兼容性问题，因此选择了在后端完成转换操作。项目使用了阿里云oss用于附件存储，可以使用oss的图片处理功能将格式转换到jpg后再显示。 在阿里云oss添加图片处理规则，然后给图片链接加上处理规则stylename，就可以正常显示了…

 2021-11-07  

vue-cli 3.x版本项目引入jQuery

看了一些相关资料，在使用npm安装jQuery后，大部分都是说需要在build文件夹下的webpack.base.conf.js文件中配置，但是我的项目下没有build文件夹，查询得知在vue-cli新版中已经移除了build文件夹。 查阅官方文档，webpack相关配置可在根目录下的vue.config.js中配置（如果没有可新建）。因此最后配置如下： const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', …

 2019-08-12