Nuxt

nuxt 的安装使用（tailwindcss）

文档常用常新，请关注最新文档

• 关于配置可以参考nuxt/tailwindopen in new window
• 关于安装可以参考Install Tailwind CSS with Nuxt.jsopen in new window

查看 nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "",
    htmlAttrs: {
      lang: "zh",
    },
    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" }],
  },
  server: {
    port: 8080,
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["~/styles/rewrite/element.scss", "~/assets/scss/index.scss"],

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

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

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

  tailwindcss: {
    viewer: false,
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [],
  // 类同router
  router: {
    base: "/",
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    vendor: [],
    extractCSS: true,
    filenames: {
      chunk: ({ isDev }) => (isDev ? "[name].js" : "[name].[contenthash:6].js"),
    },

    css: ["@/styles/rewrite/element.scss"],

    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\/]node_modules[\/]/,
            // cacheGroupKey here is commons as the key of the cacheGroup
            name(module, chunks, cacheGroupKey) {
              const moduleFileName = module
                .identifier()
                .split("/")
                .reduceRight((item) => item);
              const allChunksNames = chunks.map((item) => item.name).join("");
              return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`;
            },
            chunks: "all",
          },
          styles: {
            name: "styles",
            test: /\.(css|vue)$/,
            chunks: "all",
            enforce: true,
          },
        },
      },
    },
  },
};