{"id":3252,"date":"2025-03-24T08:46:35","date_gmt":"2025-03-23T23:46:35","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=3252"},"modified":"2025-03-24T08:47:06","modified_gmt":"2025-03-23T23:47:06","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91laravel-vite%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89-%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e3%81%8b%e3%82%89%e5%ae%9f%e8%b7%b5%e7%9a%84","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=3252","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Laravel Vite\u306e\u5b8c\u5168\u30ac\u30a4\u30c9 &#8211; \u74b0\u5883\u69cb\u7bc9\u304b\u3089\u5b9f\u8df5\u7684\u306a\u958b\u767a\u30c6\u30af\u30cb\u30c3\u30af\u307e\u3067"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">Laravel Vite\u3068\u306f \u2013 \u57fa\u790e\u304b\u3089\u7406\u89e3\u3059\u308b\u65b0\u4e16\u4ee3\u306e\u30a2\u30bb\u30c3\u30c8\u30d0\u30f3\u30c9\u30e9\u30fc<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u5f93\u6765\u306eLaravel Mix\u3068\u306e\u6c7a\u5b9a\u7684\u306a\u9055\u3044<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">Vite\u63a1\u7528\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u5316\u306e\u30e1\u30ea\u30c3\u30c8<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">Laravel Vite\u306e\u74b0\u5883\u69cb\u7bc9\u30de\u30b9\u30bf\u30fc\u30ac\u30a4\u30c9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u624b\u9806<\/a>      <\/li>      <li>        <a href=\"#i-5\">vite.config.js\u306e\u6700\u9069\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-6\">HMR\u3092\u6d3b\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-7\">\u5b9f\u8df5\u7684\u306aLaravel Vite\u306e\u6d3b\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-8\">Sass\u3084TypeScript\u306e\u52b9\u7387\u7684\u306a\u30b3\u30f3\u30d1\u30a4\u30eb\u8a2d\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-9\">Vue.js\/React\u3068\u306e\u9023\u643a\u306b\u3088\u308b\u958b\u767a\u624b\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-10\">\u672c\u756a\u74b0\u5883\u3067\u306e\u30a2\u30bb\u30c3\u30c8\u6700\u9069\u5316\u6226\u7565<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-11\">Laravel Vite\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u5b8c\u5168\u7248<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-12\">\u3088\u304f\u3042\u308b\u8a2d\u5b9a\u30df\u30b9\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-13\">\u30d3\u30eb\u30c9\u6642\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-14\">\u30c7\u30d0\u30c3\u30b0\u306b\u5f79\u7acb\u3064\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306e\u6d3b\u7528\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-15\">Laravel Vite\u3092\u4f7f\u3063\u305f\u5b9f\u8df5\u7684\u306a\u958b\u767a\u30d5\u30ed\u30fc<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-16\">\u52b9\u7387\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>      <li>        <a href=\"#i-17\">CI\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u304a\u3051\u308b\u6700\u9069\u306a\u69cb\u6210\u4f8b<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-18\">\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u8a2d\u5b9a\u5171\u6709\u306e\u30dd\u30a4\u30f3\u30c8<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">Laravel Vite\u3068\u306f \u2013 \u57fa\u790e\u304b\u3089\u7406\u89e3\u3059\u308b\u65b0\u4e16\u4ee3\u306e\u30a2\u30bb\u30c3\u30c8\u30d0\u30f3\u30c9\u30e9\u30fc<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30e2\u30c0\u30f3\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u3001JavaScript\u3084CSS\u306a\u3069\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30bb\u30c3\u30c8\u306e\u7ba1\u7406\u306f\u91cd\u8981\u306a\u8ab2\u984c\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002Laravel 9\u304b\u3089\u6a19\u6e96\u3067\u63a1\u7528\u3055\u308c\u305fVite\u306f\u3001\u3053\u306e\u8ab2\u984c\u306b\u5bfe\u3059\u308b\u65b0\u3057\u3044\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u5f93\u6765\u306eLaravel Mix\u3068\u306e\u6c7a\u5b9a\u7684\u306a\u9055\u3044<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Laravel Vite\u3068Laravel Mix\u306e\u4e3b\u306a\u9055\u3044\u306f\u4ee5\u4e0b\u306e\u70b9\u306b\u3042\u308a\u307e\u3059\uff1a<\/p>\n\n\n<div id=\"id-3feef76a-98a8-43a0-97be-ebad35c53af4\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6a5f\u80fd<\/th><th>Laravel Vite<\/th><th>Laravel Mix<\/th><\/tr><\/thead><tbody><tr><td>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u8d77\u52d5\u6642\u9593<\/td><td>\u6570\u767e\u30df\u30ea\u79d2<\/td><td>\u6570\u79d2\u301c\u6570\u5341\u79d2<\/td><\/tr><tr><td>HMR (Hot Module Replacement)<\/td><td>\u30cd\u30a4\u30c6\u30a3\u30d6\u30b5\u30dd\u30fc\u30c8<\/td><td>\u8981\u8ffd\u52a0\u8a2d\u5b9a<\/td><\/tr><tr><td>\u8a2d\u5b9a\u306e\u8907\u96d1\u3055<\/td><td>\u30b7\u30f3\u30d7\u30eb<\/td><td>\u3084\u3084\u8907\u96d1<\/td><\/tr><tr><td>\u30d3\u30eb\u30c9\u901f\u5ea6<\/td><td>\u975e\u5e38\u306b\u9ad8\u901f<\/td><td>\u4e2d\u7a0b\u5ea6<\/td><\/tr><tr><td>ES\u30e2\u30b8\u30e5\u30fc\u30eb\u30b5\u30dd\u30fc\u30c8<\/td><td>\u30cd\u30a4\u30c6\u30a3\u30d6<\/td><td>\u9650\u5b9a\u7684<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u7279\u7b46\u3059\u3079\u304d\u9055\u3044\u3068\u3057\u3066\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5\u901f\u5ea6<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vite\u306fesbuild\u3092\u4f7f\u7528\u3057\u305f\u4e8b\u524d\u30d0\u30f3\u30c9\u30eb\u306b\u3088\u308a\u3001\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5\u304c\u5287\u7684\u306b\u9ad8\u901f\u5316<\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u89e3\u6c7a\u304c\u52b9\u7387\u7684\u3067\u3001\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3082\u9ad8\u901f\u306a\u8d77\u52d5\u3092\u7dad\u6301<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>HMR\u306e\u5b9f\u88c5\u65b9\u6cd5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Laravel Vite \u3067\u306e HMR \u8a2d\u5b9a\u4f8b\n   \/\/ resources\/js\/app.js\n   if (import.meta.hot) {\n       import.meta.hot.accept()\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8a2d\u5b9a\u306e\u30b7\u30f3\u30d7\u30eb\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ vite.config.js \u306e\u57fa\u672c\u8a2d\u5b9a\n   import { defineConfig } from 'vite';\n   import laravel from 'laravel-vite-plugin';\n\n   export default defineConfig({\n       plugins: [\n           laravel({\n               input: ['resources\/css\/app.css', 'resources\/js\/app.js'],\n               refresh: true,\n           }),\n       ],\n   });<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Vite\u63a1\u7528\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u5316\u306e\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u751f\u7523\u6027\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5373\u6642\u7684\u306a\u5909\u66f4\u53cd\u6620\u306b\u3088\u308b\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u30eb\u30fc\u30d7\u306e\u77ed\u7e2e<\/li>\n\n\n\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5358\u4f4d\u3067\u306e\u66f4\u65b0\u306b\u3088\u308b\u52b9\u7387\u7684\u306a\u958b\u767a<\/li>\n\n\n\n<li>TypeScript\u3084Sass\u306e\u30cd\u30a4\u30c6\u30a3\u30d6\u30b5\u30dd\u30fc\u30c8<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u672c\u756a\u74b0\u5883\u3067\u306e\u52b9\u7387\u7684\u306a\u30b3\u30fc\u30c9\u5206\u5272<\/li>\n\n\n\n<li>\u5fc5\u8981\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u307f\u3092\u8aad\u307f\u8fbc\u3080\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30d3\u30eb\u30c9\u6642\u306e\u81ea\u52d5\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u6700\u9069\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u4f53\u9a13\u306e\u6539\u5584<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   &lt;!-- blade \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u306e\u4f7f\u7528\u4f8b --&gt;\n   @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7279\u5fb4\u7684\u306a\u6a5f\u80fd\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u81ea\u52d5\u751f\u6210<\/li>\n\n\n\n<li>\u958b\u767a\u6642\u306e\u30a8\u30e9\u30fc\u8868\u793a\u306e\u6539\u5584<\/li>\n\n\n\n<li>\u74b0\u5883\u5909\u6570\u306e\u30b9\u30de\u30fc\u30c8\u306a\u51e6\u7406<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c1\u30fc\u30e0\u958b\u767a\u3067\u306e\u5229\u70b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7d71\u4e00\u3055\u308c\u305f\u958b\u767a\u74b0\u5883\u306e\u63d0\u4f9b<\/li>\n\n\n\n<li>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u5171\u6709\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>CI\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3068\u306e\u89aa\u548c\u6027<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u904b\u7528\u9762\u3067\u306e\u30e1\u30ea\u30c3\u30c8\uff1a<\/p>\n\n\n<div id=\"id-1395c5a8-3b19-4834-8c58-9bee97fbdc4d\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30e1\u30ea\u30c3\u30c8<\/th><th>\u8a73\u7d30<\/th><\/tr><\/thead><tbody><tr><td>\u74b0\u5883\u69cb\u7bc9\u306e\u7c21\u7d20\u5316<\/td><td><code>npm install<\/code>\u3068\u6700\u5c0f\u9650\u306e\u8a2d\u5b9a\u306e\u307f\u3067\u958b\u59cb\u53ef\u80fd<\/td><\/tr><tr><td>\u5b66\u7fd2\u66f2\u7dda<\/td><td>\u76f4\u611f\u7684\u306aAPI\u8a2d\u8a08\u306b\u3088\u308a\u77ed\u671f\u9593\u3067\u7fd2\u5f97\u53ef\u80fd<\/td><\/tr><tr><td>\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027<\/td><td>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u304c\u30b7\u30f3\u30d7\u30eb\u3067\u7ba1\u7406\u304c\u5bb9\u6613<\/td><\/tr><tr><td>\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3<\/td><td>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6210\u9577\u306b\u5408\u308f\u305b\u305f\u67d4\u8edf\u306a\u62e1\u5f35\u304c\u53ef\u80fd<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e\u3088\u3046\u306b\u3001Laravel Vite\u306f\u5f93\u6765\u306eLaravel Mix\u3068\u6bd4\u8f03\u3057\u3066\u3001\u958b\u767a\u52b9\u7387\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3001\u958b\u767a\u4f53\u9a13\u306e\u3042\u3089\u3086\u308b\u9762\u3067\u512a\u308c\u305f\u7279\u5fb4\u3092\u6301\u3063\u3066\u3044\u307e\u3059\u3002\u7279\u306b\u3001\u9ad8\u901f\u306a\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3068HMR\u306e\u30cd\u30a4\u30c6\u30a3\u30d6\u30b5\u30dd\u30fc\u30c8\u306f\u3001\u958b\u767a\u8005\u306e\u751f\u7523\u6027\u3092\u5927\u304d\u304f\u5411\u4e0a\u3055\u305b\u308b\u8981\u56e0\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">Laravel Vite\u306e\u74b0\u5883\u69cb\u7bc9\u30de\u30b9\u30bf\u30fc\u30ac\u30a4\u30c9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u624b\u9806<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u5c0e\u5165<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Laravel \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\uff08\u65b0\u898f\u306e\u5834\u5408\uff09\ncomposer create-project laravel\/laravel example-app\n\n# \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3078\u79fb\u52d5\ncd example-app\n\n# \u5fc5\u8981\u306anpm\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install --save-dev vite @vitejs\/plugin-vue laravel-vite-plugin<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u5c0e\u5165<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Laravel Vite \u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install --save-dev @vitejs\/plugin-vue laravel-vite-plugin\n\n# \u958b\u767a\u306b\u5fc5\u8981\u306a\u8ffd\u52a0\u30d1\u30c3\u30b1\u30fc\u30b8\uff08\u5fc5\u8981\u306b\u5fdc\u3058\u3066\uff09\nnpm install --save-dev sass postcss autoprefixer<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c0e\u5165\u6642\u306e\u6ce8\u610f\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js v14.18\u4ee5\u4e0a\u304c\u5fc5\u8981<\/li>\n\n\n\n<li>npm v7\u4ee5\u4e0a\u3092\u63a8\u5968<\/li>\n\n\n\n<li>composer\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6e08\u307f\u3067\u3042\u308b\u3053\u3068<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">vite.config.js\u306e\u6700\u9069\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u4f8b\u304b\u3089\u3001\u5b9f\u8df5\u7684\u306a\u8a2d\u5b9a\u307e\u3067\u6bb5\u968e\u7684\u306b\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u672c\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: ['resources\/css\/app.css', 'resources\/js\/app.js'],\n            refresh: true,\n        }),\n    ],\n});<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u9ad8\u5ea6\u306a\u8a2d\u5b9a\u4f8b<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\nimport vue from '@vitejs\/plugin-vue';\nimport path from 'path';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: [\n                'resources\/css\/app.css',\n                'resources\/js\/app.js'\n            ],\n            refresh: true,\n        }),\n        vue({\n            template: {\n                transformAssetUrls: {\n                    base: null,\n                    includeAbsolute: false,\n                }\n            }\n        }),\n    ],\n    resolve: {\n        alias: {\n            '@': path.resolve(__dirname, '.\/resources\/js'),\n            '~': path.resolve(__dirname, '.\/resources\/css'),\n        },\n    },\n    server: {\n        hmr: {\n            host: 'localhost',\n        },\n        watch: {\n            usePolling: true,\n        },\n    },\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u306e\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n<div id=\"id-bdd02965-d840-49d0-8fa8-4f8dea08d48e\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u8a2d\u5b9a\u9805\u76ee<\/th><th>\u76ee\u7684<\/th><th>\u63a8\u5968\u8a2d\u5b9a<\/th><\/tr><\/thead><tbody><tr><td>input<\/td><td>\u30b3\u30f3\u30d1\u30a4\u30eb\u5bfe\u8c61\u30d5\u30a1\u30a4\u30eb<\/td><td>\u5fc5\u8981\u6700\u5c0f\u9650\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3092\u6307\u5b9a<\/td><\/tr><tr><td>refresh<\/td><td>\u81ea\u52d5\u30ea\u30ed\u30fc\u30c9\u8a2d\u5b9a<\/td><td>true\u63a8\u5968\uff08\u958b\u767a\u52b9\u7387\u5411\u4e0a\uff09<\/td><\/tr><tr><td>server.hmr<\/td><td>HMR\u8a2d\u5b9a<\/td><td>\u958b\u767a\u74b0\u5883\u306b\u5fdc\u3058\u3066\u9069\u5207\u306b\u8a2d\u5b9a<\/td><\/tr><tr><td>resolve.alias<\/td><td>\u30d1\u30b9\u89e3\u6c7a\u8a2d\u5b9a<\/td><td>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306b\u5fdc\u3058\u3066\u8a2d\u5b9a<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">HMR\u3092\u6d3b\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;!-- ... --&gt;\n    @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;!-- ... --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>HMR\u5bfe\u5fdc\u306eJavaScript\u30e2\u30b8\u30e5\u30fc\u30eb\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ resources\/js\/app.js\nif (import.meta.hot) {\n    import.meta.hot.accept((newModule) =&gt; {\n        console.log('HMR update applied');\n    });\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5\u3068\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u8d77\u52d5\nnpm run dev\n\n# \u30d3\u30eb\u30c9\uff08\u672c\u756a\u74b0\u5883\u7528\uff09\nnpm run build<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u52b9\u7387\u7684\u306a\u958b\u767a\u74b0\u5883\u306e\u305f\u3081\u306e\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u8a2d\u5b9a\u78ba\u8a8d<\/li>\n\n\n\n<li>\u4e0d\u8981\u306a\u30d5\u30a1\u30a4\u30eb\u30a6\u30a9\u30c3\u30c1\u306e\u9664\u5916<\/li>\n\n\n\n<li>\u9069\u5207\u306a\u30dd\u30fc\u30c8\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c7\u30d0\u30c3\u30b0\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u6709\u52b9\u5316<\/li>\n\n\n\n<li>\u30a8\u30e9\u30fc\u8868\u793a\u306e\u6700\u9069\u5316<\/li>\n\n\n\n<li>\u30ed\u30b0\u30ec\u30d9\u30eb\u306e\u8abf\u6574<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u74b0\u5883\u5909\u6570\u306e\u9069\u5207\u306a\u7ba1\u7406<\/li>\n\n\n\n<li>API\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u4fdd\u8b77<\/li>\n\n\n\n<li>CORS\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u958b\u767a\u74b0\u5883\u69cb\u7bc9\u6642\u306e\u63a8\u5968\u8a2d\u5b9a\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n    \"scripts\": {\n        \"dev\": \"vite\",\n        \"build\": \"vite build\",\n        \"serve\": \"vite preview\"\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3092\u884c\u3046\u3053\u3068\u3067\u3001Laravel Vite\u306e\u6301\u3064\u9ad8\u901f\u306a\u958b\u767a\u74b0\u5883\u3068\u52b9\u7387\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u6a5f\u80fd\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306bHMR\u306e\u6d3b\u7528\u306f\u3001\u958b\u767a\u52b9\u7387\u3092\u5927\u304d\u304f\u5411\u4e0a\u3055\u305b\u308b\u91cd\u8981\u306a\u8981\u7d20\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-7\">\u5b9f\u8df5\u7684\u306aLaravel Vite\u306e\u6d3b\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">Sass\u3084TypeScript\u306e\u52b9\u7387\u7684\u306a\u30b3\u30f3\u30d1\u30a4\u30eb\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Sass\/SCSS\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: [\n                'resources\/sass\/app.scss',\n                'resources\/js\/app.js'\n            ],\n            refresh: true,\n        }),\n    ],\n    css: {\n        preprocessorOptions: {\n            scss: {\n                additionalData: `\n                    @import \"resources\/sass\/_variables.scss\";\n                    @import \"resources\/sass\/_mixins.scss\";\n                `\n            }\n        }\n    }\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u88c5\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ resources\/sass\/_variables.scss\n$primary-color: #4a5568;\n$spacing-unit: 1rem;\n\n\/\/ resources\/sass\/components\/_button.scss\n.btn {\n    padding: $spacing-unit;\n    background-color: $primary-color;\n    &amp;:hover {\n        opacity: 0.9;\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>TypeScript\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ tsconfig.json\n{\n    \"compilerOptions\": {\n        \"target\": \"ESNext\",\n        \"useDefineForClassFields\": true,\n        \"module\": \"ESNext\",\n        \"moduleResolution\": \"Node\",\n        \"strict\": true,\n        \"jsx\": \"preserve\",\n        \"sourceMap\": true,\n        \"resolveJsonModule\": true,\n        \"isolatedModules\": true,\n        \"esModuleInterop\": true,\n        \"lib\": [\"ESNext\", \"DOM\"],\n        \"skipLibCheck\": true,\n        \"baseUrl\": \".\",\n        \"paths\": {\n            \"@\/*\": [\"resources\/js\/*\"]\n        }\n    },\n    \"include\": [\"resources\/js\/**\/*.ts\", \"resources\/js\/**\/*.d.ts\", \"resources\/js\/**\/*.vue\"],\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u88c5\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ resources\/js\/types\/User.ts\ninterface User {\n    id: number;\n    name: string;\n    email: string;\n    created_at: string;\n}\n\n\/\/ resources\/js\/services\/UserService.ts\nexport class UserService {\n    async getUser(id: number): Promise&lt;User&gt; {\n        const response = await fetch(`\/api\/users\/${id}`);\n        return response.json();\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">Vue.js\/React\u3068\u306e\u9023\u643a\u306b\u3088\u308b\u958b\u767a\u624b\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Vue.js\u3068\u306e\u9023\u643a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nimport vue from '@vitejs\/plugin-vue'\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: ['resources\/js\/app.js'],\n            refresh: true,\n        }),\n        vue({\n            template: {\n                transformAssetUrls: {\n                    base: null,\n                    includeAbsolute: false,\n                }\n            }\n        }),\n    ],\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Vue3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- resources\/js\/components\/TaskList.vue --&gt;\n&lt;template&gt;\n    &lt;div class=\"task-list\"&gt;\n        &lt;div v-for=\"task in tasks\" :key=\"task.id\" class=\"task-item\"&gt;\n            &lt;h3&gt;{{ task.title }}&lt;\/h3&gt;\n            &lt;p&gt;{{ task.description }}&lt;\/p&gt;\n            &lt;button @click=\"completeTask(task.id)\"&gt;\u5b8c\u4e86&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script setup lang=\"ts\"&gt;\nimport { ref, onMounted } from 'vue'\nimport type { Task } from '@\/types'\n\nconst tasks = ref&lt;Task[]&gt;([])\n\nconst completeTask = async (id: number) =&gt; {\n    await fetch(`\/api\/tasks\/${id}\/complete`, { method: 'POST' })\n    tasks.value = tasks.value.filter(task =&gt; task.id !== id)\n}\n\nonMounted(async () =&gt; {\n    const response = await fetch('\/api\/tasks')\n    tasks.value = await response.json()\n})\n&lt;\/script&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>React\u3068\u306e\u9023\u643a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nimport react from '@vitejs\/plugin-react'\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: ['resources\/js\/app.jsx'],\n            refresh: true,\n        }),\n        react(),\n    ],\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ resources\/js\/components\/TaskList.jsx\nimport { useState, useEffect } from 'react'\n\nexport function TaskList() {\n    const [tasks, setTasks] = useState([])\n\n    useEffect(() =&gt; {\n        fetch('\/api\/tasks')\n            .then(res =&gt; res.json())\n            .then(data =&gt; setTasks(data))\n    }, [])\n\n    const completeTask = async (id) =&gt; {\n        await fetch(`\/api\/tasks\/${id}\/complete`, { method: 'POST' })\n        setTasks(tasks.filter(task =&gt; task.id !== id))\n    }\n\n    return (\n        &lt;div className=\"task-list\"&gt;\n            {tasks.map(task =&gt; (\n                &lt;div key={task.id} className=\"task-item\"&gt;\n                    &lt;h3&gt;{task.title}&lt;\/h3&gt;\n                    &lt;p&gt;{task.description}&lt;\/p&gt;\n                    &lt;button onClick={() =&gt; completeTask(task.id)}&gt;\u5b8c\u4e86&lt;\/button&gt;\n                &lt;\/div&gt;\n            ))}\n        &lt;\/div&gt;\n    )\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u672c\u756a\u74b0\u5883\u3067\u306e\u30a2\u30bb\u30c3\u30c8\u6700\u9069\u5316\u6226\u7565<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d3\u30eb\u30c9\u6700\u9069\u5316\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nexport default defineConfig({\n    build: {\n        chunkSizeWarningLimit: 1000,\n        rollupOptions: {\n            output: {\n                manualChunks: {\n                    vendor: ['vue', 'axios'],\n                    utils: ['lodash', 'moment']\n                }\n            }\n        },\n        minify: 'terser',\n        terserOptions: {\n            compress: {\n                drop_console: true,\n                drop_debugger: true\n            }\n        }\n    }\n});<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u306e\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ config\/vite.php\nreturn [\n    'cache' =&gt; [\n        'duration' =&gt; 60 * 60 * 24 * 30, \/\/ 30 days\n        'strategy' =&gt; 'version',\n    ],\n];<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/strong><\/li>\n<\/ol>\n\n\n<div id=\"id-21e0e3fe-1f3a-4bbe-885e-d0b36d70c487\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6700\u9069\u5316\u9805\u76ee<\/th><th>\u5b9f\u88c5\u65b9\u6cd5<\/th><th>\u52b9\u679c<\/th><\/tr><\/thead><tbody><tr><td>\u30b3\u30fc\u30c9\u5206\u5272<\/td><td>Dynamic Import\u306e\u6d3b\u7528<\/td><td>\u521d\u671f\u30ed\u30fc\u30c9\u6642\u9593\u306e\u524a\u6e1b<\/td><\/tr><tr><td>\u753b\u50cf\u6700\u9069\u5316<\/td><td>vite-plugin-imagemin<\/td><td>\u30a2\u30bb\u30c3\u30c8\u30b5\u30a4\u30ba\u306e\u524a\u6e1b<\/td><\/tr><tr><td>\u30d7\u30ea\u30ed\u30fc\u30c9<\/td><td>\u30ea\u30f3\u30af\u30bf\u30b0\u306e\u81ea\u52d5\u751f\u6210<\/td><td>\u8aad\u307f\u8fbc\u307f\u901f\u5ea6\u306e\u5411\u4e0a<\/td><\/tr><tr><td>Tree Shaking<\/td><td>ES\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u6d3b\u7528<\/td><td>\u4e0d\u8981\u30b3\u30fc\u30c9\u306e\u524a\u9664<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u88c5\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u52d5\u7684\u30a4\u30f3\u30dd\u30fc\u30c8\u306e\u4f8b\nconst TaskList = () =&gt; import('.\/components\/TaskList.vue')\n\n\/\/ \u753b\u50cf\u6700\u9069\u5316\u306e\u8a2d\u5b9a\nimport imagemin from 'vite-plugin-imagemin'\n\nexport default defineConfig({\n    plugins: [\n        imagemin({\n            gifsicle: {\n                optimizationLevel: 7,\n                interlaced: false\n            },\n            optipng: {\n                optimizationLevel: 7\n            },\n            mozjpeg: {\n                quality: 80\n            },\n            pngquant: {\n                quality: [0.8, 0.9],\n                speed: 4\n            },\n            svgo: {\n                plugins: [\n                    {\n                        name: 'removeViewBox'\n                    },\n                    {\n                        name: 'removeEmptyAttrs',\n                        active: false\n                    }\n                ]\n            }\n        })\n    ]\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u5b9f\u8df5\u7684\u306a\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u306a\u958b\u767a\u74b0\u5883\u3068\u6700\u9069\u5316\u3055\u308c\u305f\u672c\u756a\u74b0\u5883\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u306e\u9023\u643a\u3084\u30d3\u30eb\u30c9\u6700\u9069\u5316\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u76f4\u63a5\u7684\u306a\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u91cd\u8981\u306a\u8981\u7d20\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-11\">Laravel Vite\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u5b8c\u5168\u7248<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u3088\u304f\u3042\u308b\u8a2d\u5b9a\u30df\u30b9\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u30a8\u30e9\u30fc<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u554f\u984c\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Failed to load resource: the server responded with a status of 404 (Not Found)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u89e3\u6c7a\u7b56\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u6b63\u3057\u3044Vite\u30de\u30cb\u30d5\u30a7\u30b9\u30c8\u30d1\u30b9\u306e\u8a2d\u5b9a\n\/\/ config\/vite.php\nreturn [\n    'manifest_path' =&gt; public_path('build\/manifest.json'),\n    'build_path' =&gt; public_path('build'),\n];\n\n\/\/ resources\/views\/app.blade.php\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    @vite(['resources\/css\/app.css', 'resources\/js\/app.js'])\n&lt;\/head&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>HMR\u304c\u6a5f\u80fd\u3057\u306a\u3044\u554f\u984c<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u75c7\u72b6\u3068\u5bfe\u51e6\u6cd5\uff1a<\/p>\n\n\n<div id=\"id-f0d9b8fa-7623-461d-a047-ae05d7577242\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u75c7\u72b6<\/th><th>\u539f\u56e0<\/th><th>\u89e3\u6c7a\u7b56<\/th><\/tr><\/thead><tbody><tr><td>\u5909\u66f4\u304c\u53cd\u6620\u3055\u308c\u306a\u3044<\/td><td>WebSocket\u63a5\u7d9a\u30a8\u30e9\u30fc<\/td><td>\u30dd\u30fc\u30c8\u8a2d\u5b9a\u306e\u78ba\u8a8d\u3068\u30d5\u30a1\u30a4\u30a2\u30a6\u30a9\u30fc\u30eb\u8a2d\u5b9a\u306e\u898b\u76f4\u3057<\/td><\/tr><tr><td>\u90e8\u5206\u7684\u306a\u66f4\u65b0\u5931\u6557<\/td><td>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u4e0d\u5099<\/td><td>vite.config.js\u306eHMR\u8a2d\u5b9a\u306e\u4fee\u6b63<\/td><\/tr><tr><td>\u5b8c\u5168\u306a\u66f4\u65b0\u505c\u6b62<\/td><td>\u30d7\u30ed\u30bb\u30b9\u306e\u7af6\u5408<\/td><td>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u518d\u8d77\u52d5\u3068\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nexport default defineConfig({\n    server: {\n        hmr: {\n            host: 'localhost',\n            protocol: 'ws',\n            port: 5173\n        },\n        watch: {\n            usePolling: true,\n            interval: 1000\n        }\n    }\n});<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u4f9d\u5b58\u95a2\u4fc2\u306e\u7af6\u5408\u89e3\u6c7a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u4f9d\u5b58\u95a2\u4fc2\u306e\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\nrm -rf node_modules\nrm package-lock.json\n\n# \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2\nnpm cache clean --force\n\n# \u4f9d\u5b58\u95a2\u4fc2\u306e\u518d\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u30d3\u30eb\u30c9\u6642\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nexport default defineConfig({\n    build: {\n        \/\/ \u30c1\u30e3\u30f3\u30af\u30b5\u30a4\u30ba\u306e\u8b66\u544a\u3057\u304d\u3044\u5024\u3092\u8abf\u6574\n        chunkSizeWarningLimit: 1000,\n\n        \/\/ \u51fa\u529b\u306e\u6700\u9069\u5316\n        rollupOptions: {\n            output: {\n                \/\/ \u30d9\u30f3\u30c0\u30fc\u30c1\u30e3\u30f3\u30af\u306e\u5206\u5272\n                manualChunks(id) {\n                    if (id.includes('node_modules')) {\n                        return 'vendor';\n                    }\n                }\n            }\n        }\n    }\n});<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d3\u30eb\u30c9\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u76e3\u8996\u3068\u30c7\u30d0\u30c3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: ['resources\/css\/app.css', 'resources\/js\/app.js'],\n            refresh: true,\n        }),\n    ],\n    build: {\n        \/\/ \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u751f\u6210\u306e\u5236\u5fa1\n        sourcemap: process.env.NODE_ENV === 'development',\n\n        \/\/ \u30d3\u30eb\u30c9\u60c5\u5831\u306e\u51fa\u529b\n        reportCompressedSize: true,\n\n        \/\/ \u8a73\u7d30\u306a\u30c1\u30e3\u30f3\u30af\u60c5\u5831\n        manifest: true,\n\n        \/\/ \u30d3\u30eb\u30c9\u306e\u9032\u884c\u72b6\u6cc1\u8868\u793a\n        terserOptions: {\n            compress: {\n                drop_console: true,\n            },\n        },\n    },\n});<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a2\u30bb\u30c3\u30c8\u6700\u9069\u5316\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">  # \u30d3\u30eb\u30c9\u30b5\u30a4\u30ba\u306e\u5206\u6790\n  npm run build -- --report\n\n  # \u672a\u4f7f\u7528\u30b3\u30fc\u30c9\u306e\u691c\u51fa\n  npm run build -- --debug-info\n\n  # \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6e2c\u5b9a\n  npm run build -- --profile<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u30c7\u30d0\u30c3\u30b0\u306b\u5f79\u7acb\u3064\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306e\u6d3b\u7528\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Vite\u958b\u767a\u8005\u30c4\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u958b\u767a\u6642\u306e\u8a3a\u65ad\u60c5\u5831\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ resources\/js\/app.js\nif (import.meta.env.DEV) {\n    \/\/ \u958b\u767a\u74b0\u5883\u5c02\u7528\u306e\u30c7\u30d0\u30c3\u30b0\u60c5\u5831\n    console.log('Build Info:', import.meta.env.VITE_APP_VERSION);\n    console.log('API URL:', import.meta.env.VITE_API_URL);\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d6\u30e9\u30a6\u30b6\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306e\u6d3b\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c7\u30d0\u30c3\u30b0\u8a2d\u5b9a\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nexport default defineConfig({\n    build: {\n        \/\/ \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u751f\u6210\n        sourcemap: true,\n    },\n    plugins: [\n        laravel({\n            \/\/ HMR\u306e\u30c7\u30d0\u30c3\u30b0\u30ed\u30b0\n            hmrOptions: {\n                overlay: true,\n                log: 'info',\n            }\n        })\n    ]\n});<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30d5\u30ed\u30fc\u30c1\u30e3\u30fc\u30c8<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u3068\u5bfe\u51e6\u624b\u9806\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d3\u30eb\u30c9\u30a8\u30e9\u30fc\u306e\u5834\u5408\uff1a<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ed\u30b0\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u691c\u8a3c<\/li>\n\n\n\n<li>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30e9\u30f3\u30bf\u30a4\u30e0\u30a8\u30e9\u30fc\u306e\u5834\u5408\uff1a<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30bd\u30fc\u30eb\u30a8\u30e9\u30fc\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30bf\u30d6\u306e\u76e3\u8996<\/li>\n\n\n\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>HMR\u306e\u72b6\u614b\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u5834\u5408\uff1a<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lighthouse\u306e\u5b9f\u884c<\/li>\n\n\n\n<li>Network Throttling\u3067\u306e\u691c\u8a3c<\/li>\n\n\n\n<li>\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u306e\u76e3\u8996<\/li>\n\n\n\n<li>\u30af\u30ea\u30c6\u30a3\u30ab\u30eb\u30d1\u30b9\u306e\u5206\u6790<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u30b3\u30de\u30f3\u30c9\u96c6\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u518d\u8d77\u52d5\nnpm run dev -- --force\n\n# \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2\nnpm run build -- --emptyOutDir\n\n# \u4f9d\u5b58\u95a2\u4fc2\u306e\u66f4\u65b0\nnpm update @vitejs\/plugin-vue laravel-vite-plugin\n\n# \u8a2d\u5b9a\u306e\u691c\u8a3c\nvite optimize --debug<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u624b\u6cd5\u3092\u7406\u89e3\u3057\u3001\u9069\u5207\u306b\u9069\u7528\u3059\u308b\u3053\u3068\u3067\u3001Laravel Vite\u3092\u4f7f\u7528\u3057\u305f\u958b\u767a\u306b\u304a\u3051\u308b\u591a\u304f\u306e\u4e00\u822c\u7684\u306a\u554f\u984c\u3092\u52b9\u7387\u7684\u306b\u89e3\u6c7a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u958b\u767a\u74b0\u5883\u3067\u306e\u554f\u984c\u89e3\u6c7a\u3068\u672c\u756a\u74b0\u5883\u3067\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u54c1\u8cea\u3092\u7dad\u6301\u3059\u308b\u4e0a\u3067\u91cd\u8981\u306a\u8981\u7d20\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-15\">Laravel Vite\u3092\u4f7f\u3063\u305f\u5b9f\u8df5\u7684\u306a\u958b\u767a\u30d5\u30ed\u30fc<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u52b9\u7387\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">resources\/\n\u251c\u2500\u2500 js\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 composables\/\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u251c\u2500\u2500 pages\/\n\u2502   \u2514\u2500\u2500 app.js\n\u251c\u2500\u2500 css\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u251c\u2500\u2500 utils\/\n\u2502   \u2514\u2500\u2500 app.css\n\u2514\u2500\u2500 views\/\n    \u251c\u2500\u2500 layouts\/\n    \u2514\u2500\u2500 components\/<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ resources\/js\/components\/index.js\nexport { default as Button } from '.\/Button.vue'\nexport { default as Card } from '.\/Card.vue'\nexport { default as Modal } from '.\/Modal.vue'\n\n\/\/ resources\/js\/app.js\nimport { Button, Card, Modal } from '.\/components'<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u5225\u306e\u8a2d\u5b9a\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nexport default defineConfig(({ command, mode }) =&gt; {\n    const config = {\n        plugins: [\n            laravel({\n                input: ['resources\/css\/app.css', 'resources\/js\/app.js'],\n                refresh: true,\n            }),\n        ],\n        build: {\n            outDir: 'public\/build',\n            manifest: true,\n        }\n    }\n\n    if (mode === 'development') {\n        config.server = {\n            hmr: {\n                host: 'localhost',\n            }\n        }\n    }\n\n    if (mode === 'production') {\n        config.build.rollupOptions = {\n            output: {\n                manualChunks: {\n                    vendor: ['vue', 'axios']\n                }\n            }\n        }\n    }\n\n    return config\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">CI\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u304a\u3051\u308b\u6700\u9069\u306a\u69cb\u6210\u4f8b<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>GitHub Actions\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u4f8b<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># .github\/workflows\/laravel-vite.yml\nname: Laravel Vite CI\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main, develop ]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n    - uses: actions\/checkout@v2\n\n    - name: Setup Node.js\n      uses: actions\/setup-node@v2\n      with:\n        node-version: '16.x'\n        cache: 'npm'\n\n    - name: Install Dependencies\n      run: npm ci\n\n    - name: Build Assets\n      run: npm run build\n\n    - name: Cache Vite Build\n      uses: actions\/cache@v2\n      with:\n        path: public\/build\n        key: ${{ runner.os }}-vite-${{ hashFiles('**\/package-lock.json') }}\n        restore-keys: |\n          ${{ runner.os }}-vite-\n\n    - name: Run Tests\n      run: |\n        npm run test\n        npm run build -- --mode production<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30b9\u30af\u30ea\u30d7\u30c8\u4f8b<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#!\/bin\/bash\n# deploy.sh\n\n# \u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm ci\n\n# \u672c\u756a\u7528\u30d3\u30eb\u30c9\nnpm run build -- --mode production\n\n# \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2\nphp artisan cache:clear\nphp artisan config:clear\nphp artisan view:clear\n\n# \u30a2\u30bb\u30c3\u30c8\u306e\u6700\u9069\u5316\nphp artisan optimize<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u7d99\u7d9a\u7684\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c7\u30d7\u30ed\u30a4\u8a2d\u5b9a\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\uff1a<\/p>\n\n\n<div id=\"id-3f183c27-a97a-4ba6-9dc2-ffae29fca686\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u9805\u76ee<\/th><th>\u5b9f\u88c5\u65b9\u6cd5<\/th><th>\u91cd\u8981\u5ea6<\/th><\/tr><\/thead><tbody><tr><td>\u4f9d\u5b58\u95a2\u4fc2\u30c1\u30a7\u30c3\u30af<\/td><td>package.json\u306e\u66f4\u65b0\u78ba\u8a8d<\/td><td>\u9ad8<\/td><\/tr><tr><td>\u30d3\u30eb\u30c9\u691c\u8a3c<\/td><td>\u30c6\u30b9\u30c8\u74b0\u5883\u3067\u306e\u30d3\u30eb\u30c9\u5b9f\u884c<\/td><td>\u9ad8<\/td><\/tr><tr><td>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8<\/td><td>Lighthouse CI \u306e\u5b9f\u884c<\/td><td>\u4e2d<\/td><\/tr><tr><td>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30b9\u30ad\u30e3\u30f3<\/td><td>npm audit \u306e\u5b9f\u884c<\/td><td>\u9ad8<\/td><\/tr><tr><td>\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u4f5c\u6210<\/td><td>\u30c7\u30d7\u30ed\u30a4\u524d\u306e\u81ea\u52d5\u30d0\u30c3\u30af\u30a2\u30c3\u30d7<\/td><td>\u4e2d<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u8a2d\u5b9a\u5171\u6709\u306e\u30dd\u30a4\u30f3\u30c8<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u74b0\u5883\u306e\u6a19\u6e96\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># .nvmrc\n16.14.0\n\n# .npmrc\nsave-exact=true\nengine-strict=true<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30a8\u30c7\u30a3\u30bf\u8a2d\u5b9a\u306e\u5171\u6709<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ .editorconfig\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.{js,jsx,ts,tsx,vue}]\nindent_style = space\nindent_size = 2\n\n[*.{css,scss,less}]\nindent_style = space\nindent_size = 2<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u898f\u7d04\u306e\u81ea\u52d5\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ .eslintrc.js\nmodule.exports = {\n    root: true,\n    extends: [\n        'plugin:vue\/vue3-recommended',\n        'eslint:recommended',\n        '@vue\/typescript\/recommended'\n    ],\n    parserOptions: {\n        ecmaVersion: 2020\n    },\n    rules: {\n        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'\n    }\n}<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u30c1\u30fc\u30e0\u958b\u767a\u306e\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7ba1\u7406\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30f3\u30c1\u6226\u7565\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">  # \u6a5f\u80fd\u958b\u767a\n  git checkout -b feature\/new-component\n\n  # \u30d0\u30b0\u4fee\u6b63\n  git checkout -b fix\/asset-loading\n\n  # \u30ea\u30ea\u30fc\u30b9\u6e96\u5099\n  git checkout -b release\/v1.0.0<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30fc\u30c9\u30ec\u30d3\u30e5\u30fc\u30d7\u30ed\u30bb\u30b9\uff1a<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d7\u30eb\u30ea\u30af\u30a8\u30b9\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4f7f\u7528<\/li>\n\n\n\n<li>\u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u30b9\u30bf\u30a4\u30eb\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5f71\u97ff\u306e\u78ba\u8a8d<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u7ba1\u7406\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">  # \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30ac\u30a4\u30c9\n\n  ## \u5fc5\u8981\u8981\u4ef6\n  - Node.js 16.x\n  - PHP 8.1\u4ee5\u4e0a\n  - Composer 2.x\n\n  ## \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u624b\u9806\n  1. \u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u30af\u30ed\u30fc\u30f3\n  2. \u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n  3. \u74b0\u5883\u8a2d\u5b9a\n  4. \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u958b\u767a\u30d5\u30ed\u30fc\u3092\u9069\u5207\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u30c1\u30fc\u30e0\u30e1\u30f3\u30d0\u30fc\u9593\u306e\u5354\u529b\u3092\u5186\u6ed1\u306b\u3057\u3001\u54c1\u8cea\u306e\u9ad8\u3044\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3092\u7dad\u6301\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u6574\u5099\u3068\u30c1\u30fc\u30e0\u958b\u767a\u306e\u30eb\u30fc\u30eb\u8a2d\u5b9a\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6210\u529f\u306b\u91cd\u8981\u306a\u8981\u7d20\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,12],"tags":[],"class_list":["post-3252","post","type-post","status-publish","format-standard","category-php-laravel","category-php","nothumb"],"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3252"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3252\/revisions"}],"predecessor-version":[{"id":3254,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3252\/revisions\/3254"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}