在vite中添加插件

Question

我正在尝试Vite，并使用它来开发一个Vue应用程序与棱镜Cms。在读取Prismic的文件时，我看到必须安装依赖项

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代码给了我一个提示@导入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({终结点，apiOptions：{ accessToken }等.}”)行，从而导致错误。有人能解释一下在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本身的Vite插件 (例如，为特定文件类型添加自定义转换)。该配置不适用于Vue插件，后者只能安装在带有app.use()的Vue 3应用程序中。

用Vue 3安装棱镜：

1. 安装以下依赖项。支持Vue 3需要alpha版本的@prismicio/vue和@prismicio/client (分别为3.x和6.x )。 npm i -S @prismicio/vue“alpha”prismicio/client@alpha prismicio
2. 创建一个基于给定棱镜文档类型返回路由路径的链接解析器。已解析的路由路径应该已经在router.js中注册： const解析器= doc => { if (doc.isBroken) {blog‘/not found’} if (doc.type === 'blog_home') {doc.type '/blog‘}否则如果(doc.type === 'post') {返回'/blog/’+ doc.uid }返回‘/未找到’导出默认解析器‘
3. 在src/main.js中，使用@prismic/vue创建Vue插件，并将其与链接解析器一起传递给app.use()： 从'vue‘导入{ createApp }，从'@prismicio/vue’导入linkResolver，从./prmic.link导入应用程序。/App.vue‘import linkResolver from ./ createApp( App ) .use(路由器).use( createPrismic (createPrismic：'https://blog-demo2.prismic.io/api/v2'，linkResolver，})) .mount('#app')

演示