vite项目踩坑日记（二）

李小双
576 阅读5分钟

我正在参与掘金创作者训练营第5期， 点击了解活动详情

vite项目踩坑日记（二）

前提提要： 上一篇中我们创建了一个属于我们自己的vue3+vite的项目，今天我们就来好好趴一趴Vite的配置选项以及要注意的事项。

可以先对文件做一个规范 创建下面的文件夹存放对应的资源

        ├── src
        │   ├── api            数据请求
        │   ├── assets         静态资源
        │   ├── components     组件
        │   ├── pages          页面
        │   ├── router         路由配置
        │   ├── store          vuex数据
        │   └── utils          工具函数

有一个配置项文件叫做vite.config.ts

1、vite设置完别名 配置@指向src

根更目录找到 vite.config.ts

image.png

配置完別后就可以直接在项目进行引入文件了 这里有个小坑，万一有的小伙伴设置爆红了，提示@/xxx，这边给出的解决方案是：

image.png

tsconfig.json 配置全部代码如下：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "suppressImplicitAnyIndexErrors": true,
    "paths":{
        "@": ["./src"],
        "@/*": ["./src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/request/index.js"],
  "exclude": ["node_modules"]
}

2、引入文件省略扩展

我的项目本身没有这个问题，但是由于某个包导致了这个问题，所以可以加上一下配置。

return {
    //...
	resolve: {
      // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    }
}

如果有用到jsx的小伙伴就需要这么配置了

vue文件中的script标签带有 lang="jsx"

解1： 干掉 script或者template标签上的 lang 属性
解2：

  • vue2可在vite-plugin-vue2中设置 { jsx: true }
  • vue3 则需要安装 @vitejs/plugin-vue-jsx 此插件
  • 如果是template可以查看这里解决

3、React is not defined

看到这个我人傻了，不过还好，你有张良计，我有过墙梯。

解：在 vite.config.js 中加入，并安装依赖 @vitejs/plugin-vue-jsx

import vueJsx from '@vitejs/plugin-vue-jsx'
return {
	//...其它配置项
	esbuild: {
	  jsxFactory: 'h',
	  jsxFragment: 'Fragment'
	},
	plugins: [
	  //...其它插件
      vueJsx()
    ],
}

4、require is not defined

这是由于vite使用的是esm引入，所以并不支持commonJS规范，把require 改为import即可。要是三方包报此类错误。

解：安装vite-plugin-require并在vite.config.js加入以下代码片中的代码，如果是图片资源可以使用new URL(url, import.meta.url)这种方式去引入一个图片，具体点这里

const imgUrl = new URL('./rz-up.png', import.meta.url).href

import vitePluginRequire from "vite-plugin-require"
return {
	//...其它配置项
	plugins: [
	  //...其它插件
      vueJsx(),
      vitePluginRequire()
    ],
}

之前在csdn上搜到这篇文章这里解决require的问题，但是这也给我的项目埋下了一个大坑，具体就是这个第三方插件会影响axios的使用，让axios无法export实例，导致我这边的请求都坏掉了，为了排查这个问题，我足足花了两天时间才找到该问题，可想而知有多严重，所以在这里替大家踩坑啦 解决方案就是我上方给出的按照官方规范的引入图片地址

const imgUrl = new URL('./rz-up.png', import.meta.url).href

5、报错提示 /deep/ 异常选择器

image.png

这个问题，其实很简单只需要将/deep/替换为::v-deep()

6、关于环境变量的配置

vite中获取 环境变量 的相关信息需要使用import.meta.env，在其上边存在了五个属性，分别为：BASE_URL、DEV、MODE、PROD、SSR；

尝试输出：

image.png

但是在项目打包后会有些许的变化，我们在上边看到的所有输出是作为import.meta.env的对象属性存在的，而在打包后，其是被直接编译为一个对象而存在的，或者直接取出其中的值，因此要留意可能会出现的问题

总体来说在封装axios的时候我们经常会用到 baseURL 一般我们会写 process.env.VUE_APP_BASE_API

遇到问题:找不到名称 “process”

但是是无法获取的，所以我们需要这么引入

baseURL: import.meta.env.VITE_API_URL,//从环境中获取远程服务器地址

对了 这里得说 还得在根目录下新建.env文件，我这建立了三个，一个开发环境，一个正式环境，一个测试环境。

image.png .env.development文件：

VITE_APP_VERSION = "1.0.0" 
NODE_ENV='development' 
ENV_CONFIG= 'dev' 
VITE_APP_BASE_API= '域名'

.env.production文件：

VITE_APP_VERSION = "1.0.0" 
NODE_ENV= 'production' 
ENV_CONFIG= 'prod', 
VITE_APP_BASE_API= '域名'

然后在我的在request.ts文件改成这个

let url: any = import.meta.env // 配置不同环境的域名信息等
const service = axios.create({
  baseURL: url.VITE_APP_BASE_API, // url = base url + request url
  timeout: 60 * 1000, // 默认用40s超时时间
  headers: { // 配置OAuth 2.0的认证头
    'Content-Type': 'application/json;charset=utf-8'
  },
  withCredentials: true // send cookies when cross-domain requests
})

7、关于vite打包？

首先，我们必须知道vite打包默认基于esbuild。关于esbuild，一句两句说不清。只需要知道，它是新一代基于es Moudle、并由Go lang编写的高效快速的打包神器即可。有多快，自己可以试一试。但是请注意，它基于es Moudle。也就是说，某些浏览器原生不支持es模块导入，那么按照默认vite的默认配置，极有可能报错。

我刚开始也不知道这事，也怪我没仔细看文档。直接上来一把梭就干了起来。打包之后，部署，一打开，完蛋了！

用360极速浏览器，内核是chrome 63 版本，直接报错了！代码都压缩完了，你报错了，真有意思！

找啊找，看啊看，终于仔细看文档的时候，发现了一个重要的信息。

build中有一个属性是target。这货很重要啊。它可以直接设置你需要兼容的浏览器的list，最低仅支持到es2015。不过，这也够了。于是我在vite中配置了如下代码：

build: {
  target: ['es2015', 'chrome63'],
},

完事就干——npm run build。再次部署，直接ok。

但是，我还是不放心。万一又有什么兼容性问题，可咋整，显得咱也不专业。我又继续看 文档，有看到了一个好东西——插件。

image.png 官方仅用的四个插件之一。

仔细看看，这货就是负责兼容性的呀。

废话少说，直接上配置吧。（注意安装这个插件）

 plugins: [
  legacy({
        targets: ['chrome > 62', '> 1%', 'last 2 versions'],
  }),
],

直接把兼容性攥的死死的。

最后，vite相关系列的文章会持续更新，如有不同意见的小伙伴可以在评论区留言，大家一起讨论，学习呀~ （如果觉得本篇文章对您有帮助请一键三连给个小星星多多支持支持呀~）

avatar
文章
阅读
粉丝