添加插件到 vite

Question

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

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

然后文档说你必须注册它：

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 中导入这个插件的正确方法是什么吗？提前致谢。

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"
  }
}

Answer 2

vite.config.js 的plugins 属性是为Vite plugins 设计的，它是为 Vite 本身设计的（例如，为特定文件类型添加自定义转换）。该配置不适用于Vue plugins，它只能安装在带有app.use() 的Vue 3 应用程序中。

使用 Vue 3 设置 Prismic：

1. 安装以下依赖项。 Vue 3 支持需要 @prismicio/vue 和 @prismicio/client 的 alpha 版本（分别为 3.x 和 6.x）。

   npm i -S @prismicio/vue@alpha @prismicio/client@alpha prismic-dom
   

2. 创建一个链接解析器，它根据给定的 Prismic 文档类型返回路由路径。解析的路由路径应该已经在router.js注册了：

   const resolver = doc => {
     if (doc.isBroken) {
       return '/not-found'
     }
   
     if (doc.type === 'blog_home') {
       return '/blog'
     } else if (doc.type === 'post') {
       return '/blog/' + doc.uid
     }
   
     return '/not-found'
   }
   
   export default resolver
   

3. 在src/main.js 中，使用createPrismic() from @prismic/vue 创建Vue 插件，并将其与链接解析器一起传递给app.use()：

   import { createApp } from 'vue'
   import { createPrismic } from '@prismicio/vue'
   import linkResolver from './prismic/link-resolver'
   import App from './App.vue'
   import router from './router'
   
   createApp(App)
     .use(router)
     .use(createPrismic({
       endpoint: 'https://blog-demo2.prismic.io/api/v2',
       linkResolver,
     }))
     .mount('#app')
   

demo