当前位置：文江博客话题详情

compiler-errors Laravel vite

我可以运行＆＃x27; npm run dev＆＃x27;由于Laravel随Vite更新了

发布于 2025-02-11 13:06:18 字数 1752 浏览 2 评论 0 原文

泰勒·奥特威尔（Taylor Otwell）宣布，新的拉维尔（Laravel）项目现在将与Vite一起运行，默认情况下安装了Vite。我似乎无法运行开发环境 npm Run Dev

我安装了新的Laravel项目，安装了带有SSR的Laravel Jetstream，而Teams Supports支持击中“ NPM安装命令”。

每次我运行 npm运行dev 都会显示：

，如果我打开本地链接，它显示了：

我为什么不能用户 npm npm运行DEV 并编译我的文件？

这是我的全新laravel应用程序的包装。

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/server-renderer": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^2.9.11",
        "vue": "^3.2.31"
    }
}

而且，如果我尝试在端子中击中“ vite”，我会得到：

原文

Taylor Otwell announced that new Laravel projects now will run with Vite and that Vite is installed by default. I can't seem to be able to run dev environment npm run dev

I installed new laravel project, installed Laravel JetStream with SSR and teams support hit the 'npm install command'.

Every time I run npm run dev it shows this:

And if I open the local link, it shows this:

Why can't I user npm run dev and compile my files?

This is package.json for my brand new laravel app

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/server-renderer": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^2.9.11",
        "vue": "^3.2.31"
    }
}

and if I try hitting 'vite' in the terminal I get this:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅沫记忆 2025-02-18 13:06:18

如果您不想使用 vite ，但是混音而不是在新的Laravel项目中，则只需获得 npm Run dev 的通常行为返回以下更改：

安装Laravel Mix（因为通过新安装，它不再存在）：

npm install --save-dev laravel-mix

创建 webpack.mix.js.js 文件，如果不存在，并确保其具有以下内容：

const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files. 
|
*/

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       //
]);

update package.json ：

"scripts": {
-     "dev": "vite",
-     "build": "vite build"
+     "dev": "npm run development",
+     "development": "mix",
+     "watch": "mix watch",
+     "watch-poll": "mix watch -- --watch-options-poll=1000",
+     "hot": "mix watch --hot",
+     "prod": "npm run production",
+     "production": "mix --production"
}

删除vite助手函数（如果它们在那里）：

- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => require(`./Pages/${name}.vue`),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .mixin({ methods: { route } })
              .mount(el);
      },
});

更新环境磁带（in .env， vite _ 前缀 mix _ ）：

- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

删除Vite和Laravel插件

npm remove vite laravel-vite-plugin

删除Vite配置文件：

rm vite.config.js

从.gitignore删除这些路径：

- /public/build
- /storage/ssr

如果您已经使用Vite创建了一些代码，则必须在刀片文件中进行更多更改，请查看本文。但是，如果这是一个新项目，那么您就可以了。

If you don't want to use vite but mix instead in your new laravel project, you can just get the usual behavior of npm run dev back with the following changes:

Install Laravel Mix (because by the new installation it is not there anymore):

npm install --save-dev laravel-mix

Create a webpack.mix.js file, if it is not there, and make sure it has the following content:

const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files. 
|
*/

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       //
]);

Update package.json:

"scripts": {
-     "dev": "vite",
-     "build": "vite build"
+     "dev": "npm run development",
+     "development": "mix",
+     "watch": "mix watch",
+     "watch-poll": "mix watch -- --watch-options-poll=1000",
+     "hot": "mix watch --hot",
+     "prod": "npm run production",
+     "production": "mix --production"
}

Remove vite helper functions (if they are there):

- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => require(`./Pages/${name}.vue`),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .mixin({ methods: { route } })
              .mount(el);
      },
});

Update environment valiables (in .env, VITE_ prefix to MIX_):

- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Remove Vite and the laravel Plugin

npm remove vite laravel-vite-plugin

Remove the Vite config file:

rm vite.config.js

Remove these paths from .gitignore:

- /public/build
- /storage/ssr

If you created some code already with vite, you must have some more changes in your blade files, check out this article. But if it is a new project, you just good to go.

回复收藏 0 原文

空气里的味道 2025-02-18 13:06:18

也有同样的问题，但是提到的解决方案对我有用。相反，我看到了＆lt; script＆gt; SRC在渲染的HTML的头截面中。

脚本src buggy的屏幕示威

添加了vite.config.js，以下代码/strong>问题。

server: {
    hmr: {
        host: 'localhost',
    },
}

编辑：
该问题在 laravel的vite-plugin repo 中，它将用<<<< a href =“ https://github.com/laravel/vite-plugin/pull/42” rel =“ noreferrer”>此pr

Had the same issue, but none of the mentioned solutions worked for me. Instead I saw an issue with the <script> src's in the head-section of the rendered html.

screenshot of script src's buggy

Added in vite.config.js the following code which solved the issue.

server: {
    hmr: {
        host: 'localhost',
    },
}

Edit:
The issue was reported in laravel's vite-plugin repo and it will be fixed with this PR

回复收藏 0 原文

著墨染雨君画夕 2025-02-18 13:06:18

对于任何遇到问题的人：

使用VITE，运行 npm Run Dev 只会构建您的前端，并开始观看代码的任何更改以自动重建。

要实际启动服务器，您需要在单独的命令窗口中运行 PHP Artisan服务。

来源（请参阅Laravel 部分）：

回复收藏 0 原文

动次打次papapa 2025-02-18 13:06:18

我遇到了同样的问题，我做了以下问题，并且终于奏效了！

我做到了：

将我的 laravel project 升级为 最新（ v9.19.0）。实际上，我也将所有包裹都升级到了最新包装。
删除 node_modules ，然后使用 npm install 安装依赖项，
请确保您遵循升级指南正确。
使用 PHP Artisan Serve 运行服务器，
并使用 npm Run Dev 运行Dev Server

，如果您正确完成，则应启动Dev Server，所有JavaScript代码都应编译。（如果成功，您将看到所需的输出。）

我在上述步骤中解决了问题。

回复收藏 0 原文

埖埖迣鎅 2025-02-18 13:06:18

Vite需要更新的节点版本。

您可以下载最新的 node版本然后运行 npm npm install and NPM运行DEV

要创建您可以使用 PHP Artisan服务的服务器

回复收藏 0 原文

情泪▽动烟 2025-02-18 13:06:18

如果您使用laragon作为本地部署，则可以将 - 主机标志设置为应用程序的虚拟主机URL，它对我有用

回复收藏 0 原文

梦明 2025-02-18 13:06:18

尝试：

.env：

app_url = http：// localhost：8000

欢迎.blade.php：

<head>

<title>my project</title>

@vite(['/resources/js/app.js', '/resources/css/app.css'])

Try:

.env :

APP_URL=http://localhost:8000

welcome.blade.php :

<head>

<title>my project</title>

@vite(['/resources/js/app.js', '/resources/css/app.css'])

回复收藏 0 原文

﹂绝世的画 2025-02-18 13:06:18

更改 app_url = http：// localhost：8000 in .env 文件
使用 php artisan服务创建服务器
使用 npm run dev /代码>

回复收藏 0 原文

~没有更多了~

关于作者

风筝有风，海豚有海

暂无简介

文章

29 人气

关注发私信

友情链接

文江博客

我可以运行＆＃x27; npm run dev＆＃x27;由于Laravel随Vite更新了

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

李珊平

Quxin

范无咎

github_ZOJ2N8YxBm

若言

南…巷孤猫

友情链接

我可以运行＆＃x27; npm run dev＆＃x27;由于Laravel随Vite更新了

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

李珊平

Quxin

范无咎

github_ZOJ2N8YxBm

若言

南…巷孤猫

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。