So I'm using Vue 3 and Router. The site functions greatly when I do npm run dev. Now if I got this correct, I have to do npm run build for the site before I put it on something like netify right.
This created a dist folder, in the folder is an index.html file. It opens up blank?
I go to check the console log and see these errors
Access to script at 'file:///Z:/assets/index-64361c69.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Failed to load resource: net::ERR_FAILED
Failed to load resource: net::ERR_FILE_NOT_FOUND x2
I'm pretty new to all this so do excuse me.
My question is what could be causing the issue for index.html to be blank?
vite.config.ts:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
dist > index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-64361c69.js"></script>
<link rel="stylesheet" href="/assets/index-9b74bc40.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
index in the folder I do the npm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
After this main folder with all the files and where I do the npm stuff, I have a src folder which contains
assets
components
router
views
App.vue
main.ts
Hope this helps.
Fixed my issues.
To get it to work with Netlify I just needed to create a file with:
called
netlify.toml
That contained this
[build] command = "npm run build" publish = "dist"