使用 Vue3 install 构建 tailwindcss 以进行生产

Posted 2023-03-07

【中文标题】使用 Vue3 install 构建 tailwindcss 以进行生产

【英文标题】：building tailwindcss with Vue3 install for production

【发布时间】：2021-04-29 18:26:03

【问题描述】：

我对 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 和资产。

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

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

希望有人可以帮助我...

【问题讨论】：

控制台说什么？有什么错误吗？

感谢基思，所有 404 错误。没有加载 .js 或 .css。我在 dist 文件夹中更改了它。现在它起作用了。似乎 URL 是绝对的。在构建过程中我应该如何改变它？我猜在配置中的某个地方..任何建议..

您的后端结构如何，后端技术如何？

我使用默认的 Tailwind Vue3 安装和默认 postcss.config.js、tailwind.confif.js 和 vite.config.js

【参考方案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;
```