用vite构建的项目,vite.config.ts中出现Cannot resolve file ‘vite‘

1. 开发环境——webstorm

2. 用vite构建的项目——开始 | Vite 官方中文文档

3. 使用vant组件的时候,需要在 vite.config.js 文件中配置该插件,以让vite认识它。

4.一步一步根据官方文档操作,但是在引入如下图的时候爆红了

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

5. 网上有的说版本不对,有点说没有安装上,但是看了package.json文件,里面确实存在vite了。

所以只可能是webstorm没有检测到而显示爆红的原因,问题不大,试着在模板中使用vant的组件后然后运行一下项目,发现项目正常运行 。

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了优化vite项目的打包体积,可以在vite.config.ts文件进行配置。以下是一些常用的配置选项: 1. 使用rollup-plugin-terser插件进行代码压缩,可以将代码体积进一步减小。 2. 使用vite-plugin-compression插件进行gzip压缩,可以进一步减小文件体积。 3. 使用splitChunks选项将公共代码提取出来,避免重复打包。 4. 使用tree shaking技术,只打包项目实际使用到的代码,避免打包无用代码。 5. 使用webpack-bundle-analyzer插件分析打包后的文件,找出体积较大的文件并进行优化。 6. 配置alias选项,将一些常用的路径映射为别名,避免重复打包。 7. 配置externals选项,将一些不需要打包的依赖项排除在外,减小打包体积。 8. 配置cacheDir选项,将缓存目录设置为项目外部,避免重复打包。 以下是一个示例的vite.config.ts文件,其包含了上述的一些优化配置: ``` import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { terser } from 'rollup-plugin-terser';import viteCompression from 'vite-plugin-compression'; export default defineConfig({ plugins: [ vue(), terser(), viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz', }), ], build: { target: 'es2015', outDir: 'dist', assetsDir: 'assets', sourcemap: false, rollupOptions: { output: { manualChunks: { vue: ['vue'], antd: ['ant-design-vue'], }, }, }, }, resolve: { alias: { '@': '/src', }, }, optimizeDeps: { include: ['axios'], exclude: ['vue-demi'], }, server: { port: 3000, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值