在Nuxt中将Koa用于Shopify嵌入式应用-未导入/注入的CSS和插件

如何解决在Nuxt中将Koa用于Shopify嵌入式应用-未导入/注入的CSS和插件

我正在使用Koa将我的应用程序作为Shopify的嵌入式应用程序提供。我没有任何问题，因为我可以使用以下代码安装我的应用程序：

import 'isomorphic-fetch'
import Koa from 'koa'
import { Nuxt,Builder } from 'nuxt'
import dotenv from 'dotenv'
import shopifyAuth,{ verifyRequest } from '@shopify/koa-shopify-auth'

import session from 'koa-session'
import serve from 'koa-static-server'

dotenv.config()
const { SHOPIFY_API_SECRET_KEY,SHOPIFY_API_KEY } = process.env

async function start() {
  const server = new Koa()
  const port = process.env.PORT || 3000

  // Import and Set Nuxt.js options
  const config = require('../nuxt.config.js')
  config.dev = !(server.env === 'production')

  // Instantiate nuxt.js
  const nuxt = new Nuxt(config)

  // Build in development
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build().catch((e) => {
      console.error(e)
      process.exit(1)
    })
  } else {
    await nuxt.ready()
  }
  console.log(config)
  console.log(nuxt)

  server.use(session({ secure: true,sameSite: 'none' },server))
  server.keys = [SHOPIFY_API_SECRET_KEY]

  server.use(
    shopifyAuth({
      apiKey: SHOPIFY_API_KEY,secret: SHOPIFY_API_SECRET_KEY,scopes: ['read_products','write_orders,write_products'],afterAuth(ctx) {
        // eslint-disable-next-line no-unused-vars
        const { shop,accessToken } = ctx.session

        console.log('We did it!',accessToken)

        ctx.redirect('/')
      },})
  )

  server.use(verifyRequest())

  server.use((ctx) => {
    ctx.status = 200 // koa defaults to 404 when it sees that status is unset

    return new Promise((resolve,reject) => {
      ctx.res.on('close',resolve)
      ctx.res.on('finish',resolve)
      nuxt.render(ctx.req,ctx.res,(promise) => {
        // nuxt.render passes a rejected promise into callback on error.
        promise.then(resolve).catch(reject)
      })
    })
  })

  server.use(serve({ rootDir: '_nuxt' }))

  server.listen(port,() => {
    console.log(`> Ready on http://localhost:${port}`)
  })
}

start()

现在，问题是我的css文件和插件未导入/注入到我的应用程序中，这是我的nuxt配置：

import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
import config from './common.config'
const env = require('dotenv').config()

export default {
  mode: 'universal',target: 'static',telemetry: process.env.NUXT_TELEMETRY_DISABLED,env: {
    NUXT_TELEMETRY_DISABLED: process.env.NUXT_TELEMETRY_DISABLED,SHOPIFY_API_KEY: process.env.SHOPIFY_API_KEY,SHOPIFY_API_SECRET_KEY: process.env.SHOPIFY_API_SECRET_KEY,BASE_URL: process.env.BASE_URL,API_ROOT: process.env.API_ROOT,API_URL: process.env.API_URL,},/*
   ** Headers of the page
   */
  head: {
    env: env.parsed,title: 'QuickMall',meta: [
      { charset: 'utf-8' },{
        name: 'viewport',content:
          'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no',{
        hid: 'description',name: 'description',content: process.env.npm_package_description || '',],link: [{ rel: 'icon',type: 'image/x-icon',href: '/favicon.ico' }],/*
   ** Global CSS
   */
  css: ['@/assets/scss/app.scss'],/*
   ** Plugins to load before mounting the App
   */
  plugins: [
    { src: '~/plugins/persistedState.js',mode: 'client' },{ src: '~/plugins/signalr.js',{ src: '~/plugins/vuex-orm-axios.js' },{ src: '~/plugins/vuelidate' },/*
   ** Customize the progress-bar color
   */
  loading: { color: '#3B8070' },/*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module','@nuxtjs/gtm',gtm: {
    // https://github.com/nuxt-community/gtm-module
    // this.$gtm.push({ event: 'myEvent',...someAttributes })
    // dev: true,// Set to false to disable module in development mode
    // pageTracking: true,// Note: This is disabled by default to prevent double events when using alongside with Google Analytics so take care before enabling this option.
    id: 'GTM-XXXXXX',/*
   ** Nuxt.js modules
   */
  modules: [
    'bootstrap-vue/nuxt',// Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios','@nuxtjs/auth',// Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv','@nuxtjs/pwa',pwa: {
    workbox: {},manifest: {
      name: 'QuickMall',lang: 'en',meta: {},icons: {},bootstrapVue: {
    componentPlugins: [
      // 'ButtonPlugin',// 'CardPlugin',// 'CarouselPlugin',// 'CollapsePlugin',// 'DropdownPlugin',// 'FormCheckboxPlugin',// 'FormFilePlugin',// 'FormGroupPlugin',// 'FormRadioPlugin',// 'ModalPlugin',// 'NavPlugin',// 'PaginationPlugin',// 'PopoverPlugin',// 'ProgressPlugin',// 'TablePlugin',// 'TabsPlugin',// 'ToastPlugin'
      // 'BVToastPlugin',directivePlugins: ['VBScrollspyPlugin','VBToggle'],css: false,bvCSS: true,/*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: config.axios,/*
   ** Build configuration
   */
  build: {
    extractCSS: process.env.NODE_ENV === 'production',transpile: ['vue-agile'],parallel: true,// cache: true,// hardSource: true,// splitChunks: {
    //   layouts: true
    // },build: {
      plugins: [new LodashModuleReplacementPlugin()],resolve: {
        alias: {
          // Alias for using source of BootstrapVue
          'bootstrap-vue$': 'bootstrap-vue/src/index.js',module: {
        rules: [
          {
            test: /\.js$/,// Exclude transpiling `node_modules`,except `bootstrap-vue/src`
            exclude: /node_modules\/(?!bootstrap-vue\/src\/)/,use: {
              loader: 'babel-loader',options: {
                presets: ['env'],babel: {
      plugins: ['lodash'],presets: [
        [
          '@nuxt/babel-preset-app',{
            corejs: { version: 3 },/*
     ** You can extend webpack config here
     */
    extend(config,ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',test: /\.(js|vue)$/,loader: 'eslint-loader',exclude: /(node_modules)/,})
      }
    },nuxtI18n: {
    seo: false,}

当我使用nuxt dev运行应用程序时，这些问题不可复制。但是当通过运行koa使用backpack dev时，该问题可以复制。

这是我的背包配置：

module.exports = {
  webpack: (config,options,webpack) => {
    config.entry.main = './server/index.js'

    // Add NODE_PATH to webpack.
    // https://webpack.js.org/configuration/resolve/#resolve-modules
    // https://stackoverflow.com/questions/45894047/how-to-add-node-path-to-webpack-in-package-json
    config.resolve.modules = ['./server','./server/modules']
    return config
  },}

在构建时没有抛出错误，我唯一注意到的是我的css和插件未导入/注入。请让我知道我做错了什么或如何解决。我一直在将我的代码与以下存储库进行比较，但没有发现任何差异：

• https://github.com/Hiswe/koa-nuxt-example
• https://github.com/nuxt-community/koa-template

更新

因此我发现，使用yarn build（nuxt build && backpack build）运行应用程序并使用yarn start（cross-env NODE_ENV=production node build/main.js）提供服务时，它实际上运行良好。我不知道为什么无法使用yarn bp-dev（backpack dev）

来解决问题