NuxtJS 配置：当来自 node_modules 时，无法让插件向应用程序注册

Question

Premise

I have multiple sites with similar NuxtJS based architecture and am working on generalizing code they depend on by moving it into a self-hosted npm repository.

Currently all sites have a typical nuxt directory structure in regards to plugins.

mySite1 structure

/.nuxt
/assets
/components
/layouts
/middleware
/modules
/node_modules
/pages
/plugins
   myPlugin1.js
   myPlugin2.js
/static
/store
...
...

in mySite1/nuxt.config.js , I register these plugins like so:

...
plugins: [
   '~/plugins/myPlugin1.js',
   '~/plugins/myPlugin2.js'
]
...

example of myPlugin*.js :

import Vue from 'vue'
import SomeDependency from 'some-dependency'

Vue.use(SomeDependency)

These myPlugin*.js files are duplicated in every site's (mySite1, mySite2, etc) repo, so in order to wrangle that I want to move them into my npm package (myPackage), but these plugins fail to register when I reference their path.

Desire:

myPackage structure

plugins/
   myPlugin1.js
   myPlugin2.js

mySite1/nuxt.config.js

plugins: [
   '~/node_modules/myPackage/plugins/myPlugin1.js',
   '~/node_modules/myPackage/plugins/myPlugin2.js'
]

Issue:

For some reason I can't identify, none of the plugins from myPackage are being registered, and I'm looking for reasons why.

A few notes:

• I actually got this to work on one site, but it failed on the next two I tried to generalize. This is odd, and making me think there could be some kind of race condition in nuxt's build. I am transpiling myPackage in nuxt.config.js

...
build: {
      transpile: [
        'myPackage'
      ],
...

• For those that are familiar with working with self-hosted packages, when I run npm link myPackage (which symlinks to my working dir of myPackage instead of the one in node_modules ), it also works.

This has to either be a nuxt build thing I can't get around, or a webpack configuration thing I can't identify. I realize this is a bit abstract, but the amount of setup it would take to make a reproduction and for anyone wanting to try this doesn't make sense.

Answer 1

I figured it out. myPackage had Vue as a dependency, as did MySite1 , MySite2 , etc. NPM will look for a dependency in the node_modules folder if the project it's currently executing code in before going up the chain, so the Vue that Vue.use was referencing was the wrong Vue .

Moral of the story, only install Vue in one place. In my case, that meant removing Vue as a dependency of myPackage .