webpack.config nuxt.config,js

我是 nuxt 的新手。我想將以下 webpack 配置（來自 ckeditor vue 的檔案）添加到 nuxt.js.config https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v2.html

const path = require( 'path' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // The source of CKEditor is encapsulated in ES6 modules. By default, the code
    // from the node_modules directory is not transpiled, so you must explicitly tell
    // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
    transpileDependencies: [
        /ckeditor5-[^/\\] [/\\]src[/\\]. \.js$/,
    ],

    configureWebpack: {
        plugins: [
            // CKEditor needs its own plugin to be built using webpack.
            new CKEditorWebpackPlugin( {
                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                language: 'en',

                // Append translations to the file matching the `app` name.
                translationsOutputFile: /app/
            } )
        ]
    },

    // Vue CLI would normally use its own loader to load .svg and .css files, however:
    //  1. The icons used by CKEditor must be loaded using raw-loader,
    //  2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
    chainWebpack: config => {
        // (1.) To handle editor icons, get the default rule for *.svg files first:
        const svgRule = config.module.rule( 'svg' );

        // Then you can either:
        //
        // * clear all loaders for existing 'svg' rule:
        //
        //    svgRule.uses.clear();
        //
        // * or exclude ckeditor directory from node_modules:
        svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );

        // Add an entry for *.svg files belonging to CKEditor. You can either:
        //
        // * modify the existing 'svg' rule:
        //
        //    svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
        //
        // * or add a new one:
        config.module
            .rule( 'cke-svg' )
            .test( /ckeditor5-[^/\\] [/\\]theme[/\\]icons[/\\][^/\\] \.svg$/ )
            .use( 'raw-loader' )
            .loader( 'raw-loader' );

        // (2.) Transpile the .css files imported by the editor using PostCSS.
        // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
        config.module
            .rule( 'cke-css' )
            .test( /ckeditor5-[^/\\] [/\\]. \.css$/ )
            .use( 'postcss-loader' )
            .loader( 'postcss-loader' )
            .tap( () => {
                return {
                    postcssOptions: styles.getPostCssConfig( {
                        themeImporter: {
                            themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                        },
                        minify: true
                    } )
                };
            } );
    }
};

我的 nuxt 配置只是最新的，我確實添加了一些模塊，例如 axios、boostrap vue 和 auth。

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: "static",

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "spa",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["~/assets/less/colors.less"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    "bootstrap-vue/nuxt",
    "@nuxtjs/axios",
    "@nuxtjs/auth-next",

  ],

  auth: {
    redirect: {
      login: "/login",
      logout: "/login",
      callback: false,
      home: "/",
    },
    strategies: {
      laravelSanctum: {
        provider: "laravel/sanctum",
        url: "http://localhost",
        user: {
          property: false, // <--- Default "user"
          autoFetch: true,
        },
        // endpoints: {
        //   login: { url: "api/login", method: "post" },
        //   logout: { url: "api/auth/logout", method: "post" },
        //   user: { url: "api/user", method: "get" },
        // },
      },
    },
  },

  axios: {
    credentials: true,
    baseURL: "http://localhost", // Used as fallback if no runtime config is provided
    // withCredentials: true,
    headers: {
      accept: "application/json",
      common: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS",
        "Access-Control-Allow-Credentials": true,
      },
      delete: {},
      get: {},
      head: {},
      post: {},
      put: {},
      patch: {},
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
  router: {
    middleware: ["auth"],
  },
};

如果這樣的配置可以與 ckeditor 的 webpack 配置結合使用，那么這樣做是否正確？或者我應該將它分開并使用另一個單獨的 webpack 配置構建另一個目錄？

uj5u.com熱心網友回復：

我猜你正在尋找那個：https ://nuxtjs.org/docs/configuration-glossary/configuration-build#extend

可以創建一個外部配置并將其匯入到這個物件中，或者像大多數人一樣直接行內。

無論如何，關于如何實作配置的特定部分，Stackoverflow 上有相當多的答案，請隨意搜索以找出您需要的內容。

標籤：网页包配置nuxt.js

上一篇：用自定義短名稱替換AzureVM位置名稱

下一篇：Electron模板（Typescript Webpack）中的這個ElectronForgeERROR是什么？