Вла*_*гов 2 webpack laravel-mix vite
我很高兴通过本指南从 laravel-mix 迁移到 vite
\n当我跑步时npm run dev（vite），一切都很棒。
但是当我运行时npm run build，我收到错误：
\n\n错误：无法加载 resources/js/hooks/useRoute （由 resources/js/app.tsx 导入）：ENOENT：没有这样的文件或目录，打开 \'C:\\OpenServer\\domains\\colorbit.local\\ reso\nurces\\js\\hooks\\useRoute\'
\n
这是因为我导入了所有没有扩展名的文件。PhpStorm说应该是这样的，如果你添加扩展，那么它会给出一个错误，it\xe2\x80\x99s最好不要这样做。所以我在项目中的所有地方都使用了不带文件扩展名的导入。
\n导入文件时如何忽略扩展名？我应该如何更改我的 vite.config.js？\n示例：import {Button} from \'@componenst/ui/Button- 不是.ts扩展名。
这是代码
\n// vite.config.js\nimport { defineConfig } from \'vite\';\nimport laravel from \'laravel-vite-plugin\';\nimport react from \'@vitejs/plugin-react\';\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\n \'resources/js/app.tsx\',\n ],\n refresh: true,\n }),\n react({\n fastRefresh: false\n }),\n\n ],\n resolve: {\n alias : {\n \'@\' : \'resources/js\',\n \'@assets\' : \'resources/js/assets\',\n \'@hooks\' : \'resources/js/hooks\',\n \'@components\': \'resources/js/components\'\n },\n extensions: [\'.js\', \'.ts\', \'.tsx\', \'.jsx\'],\n },\n});\n\n// package.json\n{\n "private": true,\n "scripts": {\n "ssr": "mix --mix-config=webpack.ssr.mix.js",\n "routes": "php artisan ziggy:generate",\n "dev": "vite",\n "build": "vite build",\n "serve": "vite preview"\n },\n "devDependencies": {\n "@babel/preset-react": "^7.17.12",\n "@headlessui/react": "^1.6.3",\n "@inertiajs/server": "^0.1.0",\n "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",\n "@prettier/plugin-php": "^0.18.5",\n "@tailwindcss/forms": "^0.5.2",\n "@tailwindcss/typography": "^0.5.2",\n "@types/react": "^18.0.9",\n "@types/react-dom": "^18.0.5",\n "@types/ziggy-js": "^1.3.2",\n "@vitejs/plugin-react": "^3.0.1",\n "@vitejs/plugin-react-refresh": "^1.3.6",\n "autoprefixer": "10.4.5",\n "laravel-vite-plugin": "^0.7.3",\n "postcss": "^8.4.14",\n "postcss-import": "^14.1.0",\n "react-refresh": "^0.14.0",\n "resolve-url-loader": "^5.0.0",\n "sass": "^1.52.1",\n "sass-loader": "^12.1.0",\n "tailwindcss": "^3.0.24",\n "ts-loader": "^9.3.0",\n "typescript": "^4.7.2",\n "webpack-node-externals": "^3.0.0"\n },\n "dependencies": {\n "@inertiajs/inertia": "^0.11.0",\n "@inertiajs/inertia-react": "^0.8.0",\n "@inertiajs/progress": "^0.2.7",\n "laravel-vite": "^0.0.24",\n "react": "^18.1.0",\n "react-dom": "^18.1.0",\n "react-joyride": "^2.5.3",\n "use-sound": "^4.0.1",\n "vite": "^4.0.4",\n "ziggy-js": "^1.4.6"\n }\n}\n\n\n// Index.blade.php\n<!DOCTYPE html>\n<html lang="{{ str_replace(\'_\', \'-\', app()->getLocale()) }}">\n\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n\n {{-- MANIFEST --}}\n <link rel="manifest" href="/manifest.json">\n\n {{-- ICONS --}}\n <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">\n\n <!-- Title -->\n <title inertia>{{ config(\'app.name\', \'Colorbit\') }}</title>\n\n <!-- CSRF -->\n <meta name="csrf-token" content="{{ csrf_token() }}" />\n\n <!-- Scripts -->\n @routes\n @vite\n @inertiaHead\n</head>\n\n<body class="font-sans antialiased">\n @inertia\n</body>\n</html>\n\n// resources/js/app.tsx\nimport React from "react";\nimport Layout from "./Layouts/Layout";\nimport {createRoot} from \'react-dom/client\';\nimport {createInertiaApp} from \'@inertiajs/inertia-react\';\nimport {InertiaProgress} from \'@inertiajs/progress\';\nimport axios from \'axios\';\nimport {RouteContext} from \'@hooks/useRoute\';\nimport {initPush} from "./enable-push";\n\nimport \'../css/app.scss\';\nimport {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";\n\nwindow.axios = axios;\nwindow.axios.defaults.headers.common[\'X-Requested-With\'] = \'XMLHttpRequest\';\n\nconst appName =\n window.document.getElementsByTagName(\'title\')[0]?.innerText || \'ColorBit\';\n\ncreateInertiaApp({\n title: (title: string) => `${title} - ${appName}`,\n resolve: async (name: string) => {\n const page = (await resolvePageComponent<any>(\n `./Pages/${name}.tsx`,\n import.meta.glob(\'./Pages/**/*.tsx\'\n ))).default;\n\n page.layout = page.layout || ((page: React.ReactElement) => <Layout children={page}/>);\n\n return page;\n },\n setup({el, App, props}) {\n const root = createRoot(el);\n return root.render(\n <React.StrictMode>\n <RouteContext.Provider value={(window as any).route || 123}>\n <App {...props} />\n </RouteContext.Provider>\n </React.StrictMode>\n );\n },\n});\n\nInertiaProgress.init({color: \'#CC3824\'});\n我终于解决了这个问题。问题出在别名路径中，而不是在扩展中。在开发模式下一切正常，但npm run build抛出错误。我虽然别名很严格，但我添加只是为了安心path.resolve。我很惊讶它有帮助。
结论：使用path.resolve；）
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path'
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.tsx',
],
refresh: true,
}),
react({
fastRefresh: false
}),
],
resolve: {
alias : {
'@' : path.resolve(__dirname, 'resources/js'),
'@hooks' : path.resolve(__dirname, 'resources/js/hooks'),
'@assets' : path.resolve(__dirname, 'resources/js/assets/'),
'@components': path.resolve(__dirname, 'resources/js/components')
},
extensions: ['.js', '.ts', '.tsx', '.jsx'],
},
});| 归档时间： |
|
| 查看次数： |
5947 次 |
| 最近记录： |