标签: vitejs

我很难让 AWS Amplify 与Vite.js 一起工作

// First I was getting this error:
Uncaught ReferenceError: global is not defined

所以，我script在 index.html 的head部分添加了这个

<script>
  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
    env: { DEBUG: undefined },
    version: []
  };
</script>

现在，我收到此警告/错误

[Vue warn]: Failed to resolve component: amplify-sign-out 
[Vue warn]: Failed to resolve component: amplify-authenticator 

您可以在此处查看完整日志：

从 VueCLI 迁移到 Vite 后，据我所知，我必须“手动”进行 linting；如果我错了纠正我。因为我只想整理我的 .ts 和 .html 文件（我什至为组件将它们分开），我在我的包 json 中有这个脚本：

"lint": "eslint --ext .ts --ext .html src/"

它发现了一些问题，例如:key在循环中丢失，但它也向我显示了每个模板的这个错误：

错误清除 vue/注释指令

这始终是我的 template.html 中任何根元素的结束标记如果只有一个根元素，我会收到一个文件警告，如果有多个根元素，我会收到每个结束标签的警告。

我不明白这条规则抱怨的是什么，因为根据它的文档，它是用于 eslint-disable 注释的，我的模板中没有。

我将 Vite ( https://vitejs.dev/ ) 用于静态多页站点。这是构建命令后的默认项目文件夹结构。

my-app/
?? node_modules/
?? dist/
?  ?? assets/
?  ?? index.html
?? index.html
?? main.js
?? style.scss
?? package.json

但是我想让它成为一个多页站点并更改输入和输出目录以获得更好的组织方式

my-app/
?? node_modules/
?? package.json
?? src/
?  ?? about.html
?  ?? index.html
?  ?? main.js
?  ?? style.scss
?? dist/
?  ?? assets/
?  ?? about.html
?  ?? index.html

基本上，它应该将“src”作为输入文件夹，并将“dist”作为“my-app”的子文件夹输出。当我尝试这样做时，它会显示错误，然后我将 package.json 的脚本更改为

  "scripts": {
    "dev": "vite src",
    "build": "vite build src",
    "serve": "vite preview"
  },

这样'dev'命令就可以正常工作。但是'build'命令在src文件夹内创建dist文件夹并且不生成除index.html之外的其他HTML文件

现在我该如何解决这个问题？有什么建议吗？

我正在使用vite 0.16.6并希望将 vuepress 站点迁移到使用 vite。

但是我不确定如何配置 vite 以使用 tailwindcss。

在我的 index.css

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

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}