Question

我对 npm 很不熟悉，（我用 python 开发），大部分时间我只是按照教程说的去做。但现在我被困住了。我尝试将 Tailwindcss 与“Vue 3”结合使用，并按照网站上的安装步骤进行操作：website tailwind+Vue 3

npm init @vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

在添加一些 HTML 并运行之后：

npm run dev

在浏览器中一切正常。

但是我想构建它以用于我使用的生产

npm run build

经过一些处理后，我的 dist 文件夹中充满了 index.html 和资产。

这里开始我的问题。我期待我可以将这些文件复制到我的服务器，并且它应该为我的网站提供服务。但我看到的只是一个空白页。

我无法在任何地方或其他有相同问题的人那里找到答案，所以我认为这是我不知道的愚蠢问题。但它是什么？

希望有人能帮我...

Answer 1

试试这个，也许会奏效 https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b

Webpack（和 Vue-loader，它是一个用于 Vue.js 组件的 Webpack 加载器）可以配置为使用 PostCSS，它是一个用于 CSS 的 Webpack 加载器。

它将在 postcss.config.js 文件中查找配置，并可以从您添加的包中使用 CSS 构建应用程序。并且，使用此代码对其进行配置。

// postcss.config.js


const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

演示应用程序也是在没有任何 CSS 资产的情况下生成的。相反，它在组件内部使用 CSS（这很好）。要包含 Tailwind CSS，请使用您的编辑器或以下命令创建一个 CSS 资源。


# mkdir -p for making parents they don't exist

mkdir -p src/assets/styles/
touch src/assets/styles/index.css

现在添加这段代码，它添加了 Tailwind CSS 库的各种包。

/* src/assets/styles/index.css */


@tailwind base;
@tailwind components;
@tailwind utilities;
```

使用 Vue3 安装构建 tailwindcss 用于生产

1 个答案: