标签: vite

尝试在现有的 vite（vue 3，typescript）项目上设置 vitest。

我的 vite.config.ts 看起来像这样：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
  plugins: [vue()],
});

但在 VS 代码中它会抱怨：

悬停时我看到：

类型参数 '{ test: { globals: boolean; 环境：字符串；}; 插件：插件[]；}' 不可分配给“UserConfigExport”类型的参数。对象文字只能指定已知属性，并且“UserConfigExport”类型中不存在“test”。ts(2345)

如果我改变这一行，我可以让它消失：

import { defineConfig } from 'vite';

到：

import { defineConfig } from 'vitest/config';

但为什么？这是怎么回事？为什么我必须从 vitest 导入 DefineConfig 才能使其支持测试属性？

我们有一个普通的 Vue/Vite 设置，我正在接收TypeError: Failed to fetch dynamically imported module哨兵日志。

尽管我没有足够的数据来确认，但这些错误似乎与新的产品部署及时相关。它不会发生在本地，仅出现在已部署的代码上。
我见过一些关于 React 设置的类似问题，但没有一个得到满意的答复。
我还发现了有关动态导入 svgs 的类似问题，但我们的错误发生在完整组件上。

我们使用动态导入组件的唯一地方是路由：

export const router = createRouter({
  history: routerHistory,
  strict: true,
  routes: [
    {
      path: '/',
      name: routes.homepage.name,
      component: () => import('@/views/Home.vue'),
      children: [
        {
          path: '/overview',
          name: routes.overview.name,
          component: () => import('@/views/Overview.vue'),
        },
        // other similar routes
      ],
    },
  ],
});

我们的部门版本：

    "vue": "^3.0.9",
    "vue-router": "^4.0.5",
    "vite": "^2.0.5",

有关此问题以及如何调试它的任何其他信息将不胜感激！

我正在使用 Vue 3 和 Vite。在 Vite 构建生产后，我遇到了动态 img src 的问题。对于静态 img src 没有问题。

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>

它在两种情况下都运行良好：在开发模式下运行时以及在 vite 构建之后。但我有一些图像名称存储在动态加载的数据库中（菜单图标）。在这种情况下，我必须像这样编写路径：

<img :src="'/src/assets/images/' + menuItem.iconSource" />

（menuItem.iconSource 包含图像的名称，如“my-image.png”）。在这种情况下，它在开发模式下运行应用程序时有效，但在生产构建后无效。当 Vite 为生产构建应用程序时，路径会发生更改（所有资源都放入_assets文件夹中）。静态图片源是由Vite build处理的，路径也会相应改变，但合成图片源则不然。它只是/src/assets/images/作为一个常量，不会改变它（当应用程序抛出 404 not find for image /src/assets/images/my-image.png 时，我可以在网络监视器中看到它）。我试图找到解决方案，有人建议使用require()，但我不确定 vite 是否可以使用它。

我试图遵循文档并创建vite.config.js如下：

const config = {
  outDir: '../wwwroot/',
  proxy: {
    // string shorthand
    '/foo': 'http://localhost:4567',
    // with options
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
};

export default config;

并尝试通过以下调用对其进行测试：

fetch('/foo');
fetch('/api/test/get');

我本来期望有实际的请求，http://localhost:4567/foo但http://jsonplaceholder.typicode.com/test/get 它们都以我的开发服务器作为源，如下所示：http://localhost:3000/foo和http://localhost:3000/api/test/get

难道是我理解错了？代理应该如何工作？

我还在 Vite 存储库中创建了一个问题，但它已关闭，而且我不明白结束评论。