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"
distdirectory is meant to be served by an HTTP server. It will not work if you opendist/index.htmldirectly overfile://protocol. You can preview the production build withnpm run previewif needed.npm run previewworked. But I lost the images that I have in my folders. Might be how I have everything set up lol. That stuff is in files called projectFiles.ts. So if that worked, how would I got about for something like Netify - if you know?distassets are meant to be served from. Follow their documentation and you shouldn't have to do anything to the actual files themselves other than upload.npm run buildthen it will just be a blank vite page. Should I do that asnpm run preview. I'll have a look at thair documentation. I saw a video and it looked simple for the guy to just use his GitHub account which I was aiming to do.netlify.tomlwith:[build] command = "npm run build" publish = "dist"