Generated by vite simple codes cannot deploy to Heroku. Build is finished but I deploy it, Browser massages "vue install deploy vite Failed to resolve module specifier 'vue'" with white screen.
I asked this issue to Heroku, that support team said this issue is out of platform problem.
Generated codes by vite (and some updates with Heroku support) is following,
package.json (package-lock.json exist, omit to upload)
{
"name": "front-test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview",
"start": "node index.js"
},
"dependencies": {
"@types/node": "^22.13.10",
"express": "^4.21.2",
"serve-static": "^1.16.2",
"vue": "^3.5.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"@vue/tsconfig": "^0.7.0",
"typescript": "~5.7.2",
"vite": "^6.2.0",
"vue-tsc": "^2.2.4"
}
}
index.js
import express from 'express'
import path from 'path'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const app = express()
app.use(express.static(__dirname))
import serveStatic from 'serve-static'
app.use(serveStatic(__dirname + "/dist"))
const port = process.env.PORT || 5000
app.listen(port)
console.log('server started '+ port)
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { resolve } from 'path'
const root = resolve(__dirname)
// /config/
export default defineConfig({
base: './',
server: {
port: Number(process.env.PORT) || 5000,
host: true // Ensures the server binds to 0.0.0.0
},
plugins: [vue(),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
rollupOptions: {
external: ['vue'],
},
outDir: resolve(root, './dist'),
}
})
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
static.json
{
"root": "./dist"
}
tsconfig.app.json
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@": ["src"],
"@/*": ["src/*"]
},
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
tsconfig.node.json
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
tsconfig.json
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
src/vite-env.d.ts
/// <reference types="vite/client" />
src/main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
(and src/ has style.css, components/HelloWorld.vue, and assets/vue.svg, omit to upload)
I solved 2 errors,
1st: 503 Error. It fixed setup some libraries (express), update package.json for start.
2nd: Browser cannot load .ts files (Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.) It fixed Update main.ts to main.js for src.
Now, I cannot solve, Cannot load "vue" (Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".)
Actually my original codes have same issue. So I generated pure setup codes from vite, it made same problem.
vite+vue3+typescript cannot deploy set? I cannot find expected answers from other comments on StackOverflow.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744383566a4571549.html
评论列表（0条）