I have setup a Vue.js CLI project
I ran npm run dev and it runs in my browser at port 8080
I made some changes to the site
I typed npm run build.
moved the contents of the dist folder under an Apache server
but I get the error
Failed to load resource: the server responded with a status of 404(Not
Found)
What else do I need to copy here to avoid this error, or what can't it load exactly?
Ok, I figured it out:
Because I put the files in a subdirectory, I had to go into the index.html file and search and replace /static with static.
From: <link href=/static/css/app.fd50d336198a48f4f49d999710298aad.css
To: <link href=static/css/app.fd50d336198a48f4f49d999710298aad.css
Related
Trying to get my Shopify app to work on a server. When I run npm run serve nothing is failing, OAUTH is working, but the index.html is throwing an error saying it can't get the static files in the dist/client/assets folder. Here is my server code, here is my index.html file, and the error Im getting. index.html
server code
error
I have had no problems with deploying my vue projects so far and uploading it to my website. However suddenly Im getting the following errormessage after I have been running
npm run build
and uploading the files in my distfolder.
Uncaught SyntaxError: Unexpected token '<' chunk-vendors.468a5298.js:1
Uncaught SyntaxError: Unexpected token
'<' app.f775d578.js:1
The only difference I can notice is that vue now seems to recommend using yarn.
I made a new project just for testing using yarn but with the same error.
vue create my-application
yarn install
yarn serve
yarn build
uploading content in distfolder to my website - same errormessage
Anyone else experienced this?
My old build works without any problems
Im using #vue/cli 4.5.6
I got it working now. Deleted the folder on my ftp and created a new one. Dont know this solved it but it did :)
If you are deploying your dist not to your root of the web, then one possible cause of this is an incorrect static assets path. Make sure both your css and js generated from npm run build are imported to the correct path from your web server
On dist/index.html, you will see something like this
<link href=/js/chunk-....js rel=prefetch>
This means that it's an absolute path (root of the web), when it's supposed to be relative from the dist folder like this:
<link href=js/chunk-....js rel=prefetch>
To easily fix this is, add publicPath key in your vue.config.js file:
module.exports = {
...
publicPath: ""
};
Then rebuild the project.
I tried to load some icons and logos into my site using localhost, files are detected but are not loaded and it says "Not allowed to load local resource", I also tried to run the app using "npm install -g http-server" in terminal, but I had another error: "Failed to load resource: the server responded with a status of 404 (Not Found) #build.js:1"
There are two common options for loading images.
Through the public folder. e.g. <img src='/image/myImageName.png'>
Note: by specifying the root directory / vue is directed to the public folder
Or through the assets folder. e.g. <img src='#/assets/images/myImageName.png'>
Note: by supplying the # sign vue is directed to the src directory
I'm working on my first Vue app, which uses the Moment library and Firebase (if that matters). I use default Webpack simple. To deploy the app I did npm run build.
But when opening directly index.html (the app is deployed here) I get "Failed to load resource: the server responded with a status of 404 (Not Found)" error message and the app doesn't work at all as a result.
I have no idea how to troubleshoot this issue since there's no more information that this in DevTools...
Any idea about what I can do next?
App source code
Remove the first forward slashes of all your assets path.
It should fix your problem.
<script src="/dist/build.js"></script> // No!
<script src="dist/build.js"></script> // Yes!
Vue adds it by default during the build process, in order to make your assets relative to the root folder.
I would like to know how to use the create-react-app "npm start" script when development takes place on a remote host.
Nginx is running as a reverse proxy. The external uri looks like:
https://my-dev-box/my-cra
which is set to proxy to:
http://localhost:3000
The CRA app is static (ie no API calls).
The errors appearing in the browser's web dev console are 404s related to /static/js/bundle.js and favicon. The app's index.html page is served with a 200 response.
When I build the app, "npm build" produces an index.html file with the correct paths (courtesy of the "homepage" setting in package.json). I have looked at the documentation/tickets surrounding "Invalid Host Header" and "DANGEROUSLY_DISABLE_HOST_CHECK" but have not found a combo which works for me.
It appears to me that the fundamental issue is that "npm start" does not seem aware (as "npm build" is aware) that the WebDevServer is behind a proxy and is thus not constructing correct paths for resources.
So to restate the question, does anyone know how to get "npm start" working nicely behind a reverse proxy on remote development box. (create-react-app version used: 1.5.2)
(Note: application works perfectly behind proxy when using "npm build".)
Update: Courtesy of this question I found this comment in "webpack.config.dev.js":
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
which I guess means that what I want to do is not going to be that practical unless I eject the project. (Which I'm a little reluctant to do - the reason for using create-react-app is newness to React.)