使用 vite 的 laravel 插件配置前端资源的时候配置入口脚本无效
1. 运行环境
laravel: 10
php: 8.3
node: 18
tsc: 5.4
系统:laravel sail (debian)
开发环境
2. 问题描述
今天使用 vite 的 laravel 插件配置前端资源的时候一直失败,vite 配置如下:
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
laravel({
input: ['resources/ts/app.ts'],
refresh: true
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
}
},
}),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': 'resources/ts',
},
},
})
tsconfig.json
文件的内容如下:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["resources/**/*.ts", "resources/**/*.tsx", "resources/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
并且存在 resources/ts/app.ts
这个文件,其他配置都是默认配置,但当我在启动用 vite
服务后(sail yarn dev
)访问 http://localhost:5714/resources/ts/app.ts
的时候一直返回状态 404
和一个默认由 laravel-vite-plugin
这个包提供的页面内容。
3. 期望得到的结果
期望能正常加载 resources/ts/app.ts
编译后的内容。我一开始怀疑是否是typescript
安装的错误导致,但从新装了之后问题依旧存在,请大家帮忙看看是哪里配置的问题?