我不能运行'npm运行开发'，因为Laravel更新了Vite

bq3bfh9z 于 2022-11-26 发布在其他

关注(0)|答案(7)|浏览(180)

Taylor奥特韦尔宣布新的Laravel项目现在将运行Vite，并且默认安装Vite。我似乎不能运行开发环境'npm run dev'
我安装了新的laravel项目，安装了带有SSR的Laravel JetStream，团队支持点击“npm安装命令”。
每次运行npm run dev时，它都会显示：

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

为什么我的用户npm不能运行dev并编译我的文件？
这是我的全新laravel应用程序的package.json

{
    "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”，我会得到这个：

laravel

来源：https://stackoverflow.com/questions/72793590/i-cant-run-npm-run-dev-since-laravel-updated-with-vite

7条答案

按热度按时间

bbmckpt71#

如果您不想在新的laravel项目中使用vite，而是使用mix，您可以通过以下更改恢复npm run dev的常规行为：
1.安装Laravel Mix（因为新安装时它已不存在）：

npm install --save-dev laravel-mix

1.创建一个webpack.mix.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', [
       //
]);

1.更新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"
}

1.删除vite helper函数（如果有）：

- 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);
      },
});

1.更新环境变量（在.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}"

1.删除Vite和laravel插件

npm remove vite laravel-vite-plugin

1.删除Vite配置文件：

rm vite.config.js

1.从.gitignore中删除以下路径：

- /public/build
- /storage/ssr

如果你已经用vite创建了一些代码，你必须在你的blade文件中做一些修改，看看这篇文章。但是如果这是一个新的项目，你就可以开始了。

赞(0）回复(0）举报 2022-11-26

zyfwsgd62#

对于遇到此问题的任何人：
使用Vite，运行npm run dev只会构建您的前端，并开始观察对代码的任何更改以自动重建。
要真正启动服务器，需要在单独的命令窗口中运行php artisan serve。
来源（见Laravel章节）：https://laravel-vite.dev/guide/essentials/development.html#with-laravel

赞(0）回复(0）举报 2022-11-26

rqenqsqc3#

我也遇到了同样的问题，我做了下面的事情，它终于起作用了！
"我做到了"

升级我的Laravel Project到Latest (v9.19.0)。事实上我也升级了我所有的软件包到最新的。
删除node_modules并使用npm install安装依赖项
请确保正确遵循upgrade guides。
使用php artisan serve运行服务器
并使用npm run dev运行开发服务器

如果操作正确，它应该会启动dev服务器，并且编译所有的javascript代码（如果成功，您将看到所需的输出）。
我在上述步骤中修复了该问题。

赞(0）回复(0）举报 2022-11-26

tez616oj4#

有同样的问题，但没有一个提到的解决方案为我工作。相反，我看到一个问题，与src的头部分的呈现html。
screenshot of script src's buggy
在vite.config.js中添加了以下代码，解决了问题。

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

编辑：* 该问题已在laravel's vite-plugin repo中报告，将使用this PR修复

赞(0）回复(0）举报 2022-11-26

rur96b6h5#

Vite需要更新的节点版本。
您可以下载最新的node version，然后运行npm install和npm run dev
要创建服务器，可以使用php artisan serve

赞(0）回复(0）举报 2022-11-26

lnlaulya6#

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

赞(0）回复(0）举报 2022-11-26

ivqmmu1c7#

试试看：
.环境：
应用程序URL=http：//本地主机：8000
php：您好！

<head>

<title>my project</title>

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

赞(0）回复(0）举报 2022-11-26

我来回答

我不能运行'npm运行开发'，因为Laravel更新了Vite

7条答案

相关问题

热门标签

最新问答