vue.js - 添加插件到 vite

Question

我正在试用 Vite 并用它来开发一个带有 Prismic Cms 的 Vue 应用程序。在阅读 Prismic Doc's 我看到必须安装依赖项

npm install @prismicio/vue @prismicio/client prismic-dom

Doc然后说你必须注册它：

To use @prismicio/vue, you must register it in your app entry point, which is most likely ~/src/main.js.

The access token and API options are only necessary if your repo is set to private.

// `~/src/main.js`

import Vue from 'vue'
import App from './App'
import PrismicVue from '@prismicio/vue'
import linkResolver from './link-resolver' // Update this path if necessary

const accessToken = '' // Leave empty if your repo is public
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2' // Use your repo name

// Register plugin
Vue.use(PrismicVue, {
  endpoint,
  apiOptions: { accessToken },
  linkResolver
})

在阅读 Vite 文档时，我看到您通过 vite.config.js 文件添加插件，而不是在 main.js中使用Vue.use() 。所以我创建了一个如下：

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import PrismicVue from "@prismicio/vue";
import linkResolver from "./link-resolver"; // Update this path if necessary

const accessToken = ""; // Leave empty if your repo is public
const endpoint = "https://*******-****.cdn.prismic.io/api/v2"; // Use your repo name

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Vue(),
    PrismicVue({
      endpoint,
      apiOptions: { accessToken },
      linkResolver,
    }),
  ],
});

但是我收到如下错误：

failed to load config from C:\Users\akill\Github\shs\vite.config.js
error when starting dev server:
TypeError: (0 , import_vue.default) is not a function    at Object.<anonymous> (C:\Users\akill\Github\shs\vite.config.js:53:28)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.require.extensions.<computed> [as .js] 
(C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:76005:20)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at loadConfigFromBundledFile (C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:76013:17)
    at loadConfigFromFile (C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:75932:32)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shs@0.0.0 dev: `vite --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shs@0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我还注意到 VS Code 给了我一个提示 @import of PrismicVue 行

Could not find a declaration file for module '@prismicio/vue'. 'c:/Users/akill/Github/shs/node_modules/@prismicio/vue/dist/prismic-vue.common.js' implicitly has an 'any' type.

我已将其隔离到“PrismicVue({endpoint,apiOptions: { accessToken }, Etc....})”行，导致错误。有人能解释一下在 Vite 中导入这个插件的正确方法是什么吗？提前致谢。

标签： vue.jsvuejs3prismic.iovite

Answer 1

您可能一团糟，setup / package.json因为没有什么特别的事情可做-我敢打赌，您失踪了vite-plugin-vue2，而且vue-template-compiler。要使其正常工作，请尝试使用以下内容创建一个新项目：

vite.config.js：

const { createVuePlugin } = require('vite-plugin-vue2');

module.exports = {
  plugins: [
    createVuePlugin()
  ]
};

main.js：

import Vue from 'vue';
import App from './App.vue';
import PrismicVue from "@prismicio/vue";

const accessToken = ""; // Leave empty if your repo is public
const endpoint = "https://*******-****.cdn.prismic.io/api/v2"; // Use your repo name

Vue.use(PrismicVue, {
  endpoint: endpoint
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

App.vue：

<template>
  <div id="app">
    <img
      alt="Vue logo"
      src="./assets/logo.png"
    />
  </div>
</template>

<style>
#app {
  text-align: center;
}
</style>

然后package.json：

{
  "name": "vue2-prismic",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@prismicio/client": "^5.1.0",
    "@prismicio/vue": "^2.0.11",
    "prismic-dom": "^2.2.6",
    "vite-plugin-vue2": "^1.4.0",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "vite": "^2.0.5"
  }
}