英文:
How do I use Vite to build asset file that I can reference in the <head> of my pages?
问题
我对如何使用 Vite 感到非常困惑。在开发过程中没有问题，但当我想构建我的资源文件时，我不知道发生了什么。我习惯于 webpack 的日子，所有资源文件（.scss 和 .js）都被捆绑在一起，输出为 app.css 和 app.js。我不确定应该如何配置 Vite 以实现类似的效果，或者是否应该尝试。
我一直在尝试编写类似以下的内容：
@if(app()->environment('local'))
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@else
<link rel="stylesheet" href="/assets/stylesheet.css">
<script src="/assets/app.js"></script>
@endif
我的思路基本上是，当应用程序不在本地运行时，它将使用构建好的资源文件，在开发过程中，它将使用 @vite[ ... ] 语句。
我有一种感觉，我的方法不是使用 Vite 的正确方式，但我完全不知道该如何使用。有人能教育我如何使用 Vite 吗？
英文:
I'm very confused about how I should use Vite. While developing there are no problems but when I want to build my assets files I have no idea what's going on anymore. I'm used to the days of webpack where all of the assets files (.scss and .js) were bundled up and outputted as app.css and app.js. I'm not sure how I should configure Vite to achieve something similair or if I should even try to.
I have been trying to write something like the following:
@if(app()->environment('local'))
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@else
<link rel="stylesheet" href="/assets/stylesheet.css">
<script src="/assets/app.js"></script>
@endif
My thought process was basically when the application is not on local it uses the built assets files and during development it uses the @vite[ ... ] statement.
I have the feeling that my approach is not the way Vite should be used but I'm completely lost on how it should be approached. Can someone educate me when it comes to using Vite?
答案1
得分: 0
我不确定为什么在生产环境上使用另一种方法。文档 很清楚：
配置好你的 Vite 入口点后，你只需要在应用的根模板的
<head>中添加一个@vite()Blade 指令来引用它们。@vite指令会自动检测 Vite 开发服务器并注入 Vite 客户端以启用热模块替换。在构建模式下，该指令将加载已编译和版本化的资源，包括任何已导入的 CSS。
所以，你必须始终使用：
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
它会在需要时自动输出 <link> 和 <script>。你不需要做其他任何事情。
英文:
I am not sure why you are using another approach when on production. The documentation is very clear:
> With your Vite entry points configured, you only need reference them in a @vite() Blade directive that you add to the <head> of your application's root template. The @vite directive will automatically detect the Vite development server and inject the Vite client to enable Hot Module Replacement. In build mode, the directive will load your compiled and versioned assets, including any imported CSS.
So, you have to always use:
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
It will automatically output <link> and <script> when needed. You do not have to do anything else.
答案2
得分: -1
我认为你想要将Vite资产发布到服务器，你需要运行以下命令：
在头部放置：
@vite(['resources/css/app.css', 'resources/js/app.js'])
运行命令：
npm run build
它将会构建资产到public/assets/build文件夹中，文件名类似于app.xxxxxx.css或app.xxxxxx.js。
如果你在发布代码时使用git，那么请确保在忽略文件中包含'/public/build'和'/public/hot'。
英文:
I think you wan to publish Vite Assets to server, you need to run following command:
Put in head:
@vite(['resources/css/app.css', 'resources/js/app.js'])
Run command:
npm run build
It will build the assets into the public/assets/build folder, with filenames like app.xxxxxx.css or app.xxxxxx.js.
If you are using git for publishing code then '/public/build' and '/public/hot' from ignore file.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论