添加插件到 vite

Posted 2023-02-21

【中文标题】添加插件到 vite

【英文标题】：Adding a plugin to vite

【发布时间】：2021-10-30 11:31:03

【问题描述】：

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

【参考方案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
      
      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"
  

【讨论】：

对不起，我应该指定我正在使用 Vue 3。在开发者启动时出现错误“Vue 包版本不匹配：-vue@3.2.8 (C:\Users\akill\Github\shs -site\node_modules\vue\index.js) - vue-template-compiler@2.6.14 (C:\Users\akill\Github\shs-site\node_modules\vue-template-compiler\package.json)”我假设是因为 Vue 3。

【参考方案2】：

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

使用 Vue 3 设置 Prismic：

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

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

创建一个链接解析器，它根据给定的 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

在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