Nuxt.js 运行 生成，全局混合（...不是函数）

Question

我制作了一些全局混音，只要我发出 run dev 命令，它们就可以正常工作。 但是当我制作 run generate 时，我在控制台中收到错误“不是函数”。 类似的问题在我连接外部插件时出现在服务器上，但在开发模式下不会发生。 我尝试了不同的解决方案，但没有任何帮助。

这是我的nuxt.config（只留下基本设置用于演示）。关注plugins/seo.js

export default {
  target: 'static',
  srcDir: 'nuxt',
  ssr: false,
  plugins: [
    { src: '~plugins/nuxt-quill-plugin', ssr: false },
    { src:'~plugins/vue-final-modal.js'},
    { src: '~plugins/notifications.js', mode: 'client' },
    '~plugins/persistedState.js',
    '~plugins/clickOutside.js',
    '~plugins/dateTimePicker.js',
    '~plugins/seo.js',
    "~plugins/location.js",
    "~plugins/fetchData.js"
  ],
  echo: {
     plugins: [ '~/plugins/echo.js' ]
  },
  components: true,
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/auth-next',
    ['@nuxtjs/laravel-echo', { 
      broadcaster: 'pusher', 
      key: 'e27d2f2173c11d7b12c7',
      cluster: 'eu',
      forceTLS: true,
      authEndpoint: '/broadcasting/auth',
    }],
      'nuxt-laravel'
  ],
  build: {
   transpile: ["vue-final-modal", 'notifications', 'fetchData', 'location', 'seo', 'dom7'],
   vendor: ["vue-final-modal", 'notifications', 'fetchData', 'location', 'seo', 'dom7'],
    loaders: {
        cssModules: {
            localIdentName: '[local]', //Work
            modules: false
        },
        css: {
            localIdentName: '[local]'
        }
    }
  },
  generate: {
    vendor: ["vue-final-modal", 'notifications', 'nuxt-quill-plugin', 'fetchData', 'location', 'seo', 'dom7'],
    transpile: ["vue-final-modal", 'notifications', 'nuxt-quill-plugin', 'fetchData', 'location', 'seo', 'dom7'],
    loaders: {
        cssModules: {
            localIdentName: '[local]', //Work
            modules: false
        },
        css: {
            localIdentName: '[local]'
        }
    }       
},
}

这是我的 mixins 之一，它因错误“seoPath 不是函数”而中断。注意seoPath方法。

import Vue from "vue"

if (!Vue.seo_dispatcher) {
  Vue.seo_dispatcher = true
  
  Vue.mixin({
        head() {
            return {
                title: this.seoTitle,
                meta: [
                    {
                        hid: 'description',
                        name: 'description',
                        content: this.seoDesc
                    },{
                        hid: 'title',
                        name: 'title',
                        content: this.seoTitle
                    }
                ]
            }
        },
        data(){
            return {
                variableAliases: {
                    '#CITY#': 'city',
                    '#CITY_PRED#': 'city',
                    '#CITY_REGION#': 'region',
                    '#CITY_REGION_PRED#': 'region',
                    '#NAME#': 'seo',
                    '#MIN.PRICE#': 'min_price',
                    '#CATEGORY#': 'category',
                    '#PRODUCT#': 'product'
                }
            }   
        },  
      methods: {
          async dispatchSeo(to){
            if(this.$store){
                this.$store.dispatch('router/getSeo', to)
            }
          },
          // get city & area from store and suffix it to url
          // AND get language slug and prefix it ti url
          seoPath(slug){
              // if router object
              if(typeof slug === 'object') {
                let route = this.$router.resolve(slug)
                slug = route.href
              }         
              
              let slash = slug.endsWith('/')? '': '/';
              
              let url_location = [
                    this.$store.state.router.city.slug,
                    this.$store.state.router.area.slug
              ].filter((item) => {
                  return item !== null && item !== ''
              });
              
              return this.localePath(slug + slash + url_location.join('/'))
          },
          // get string and replace all variables with data form store using variable's aliase array
          replaceVariables(string){
            const reg = new RegExp('(#CITY#|#CITY_PRED#|#CITY_REGION#|#CITY_REGION_PRED#|#NAME#|#MIN.PRICE#|#CATEGORY#|#SUBCATEGORY#|#PRODUCT#)', 'gi');
            return string.replaceAll(reg, (match) => {
                
                let modal = this.variableAliases[match]
                
                if(this.$store.state.router[modal] && this.$store.state.router[modal].name)
                    return  this.$store.state.router[modal].name
                else
                    return '';
    
            })
          }
      },
      computed: {
          seoH1(){
              if(this.$store)
                if(this.$store.state.router.seo && this.$store.state.router.seo.meta_h1)
                    return this.replaceVariables(this.$store.state.router.seo.meta_h1)
                else
                    return ''
          },
          seoTitle(){
              if(this.$store)
                if(this.$store.state.router.seo && this.$store.state.router.seo.meta_title)
                    return this.replaceVariables(this.$store.state.router.seo.meta_title) 
                else
                    return ''
          },
          seoDesc(){
              if(this.$store)
                if(this.$store.state.router.seo && this.$store.state.router.seo.meta_desc)
                    return this.replaceVariables(this.$store.state.router.seo.meta_desc) 
                else
                    return ''
          },
          seoText(){
              if(this.$store)
                if(this.$store.state.router.seo && this.$store.state.router.seo.meta_text)
                    return this.replaceVariables(this.$store.state.router.seo.meta_text)
                else
                    return '' 
          }
      }
  })
}

Answer 1

我发现 plugins 目录中的文件没有编译到项目的构建文件中，而是保留为插件目录中文件的链接。在我的例子中，该项目建立在 nuxt 文件夹之外的目录中，因此无法访问插件文件夹中的文件。

将项目构建路径移动到 nuxt 目录中解决了问题。