Hi i build a new vuejs project with "npm create test" and serve that with "npm run serve"
And the result was this
But when I go to the desired address in "http://localhost:8080/" I get these errors in the console:
I researched this topic and the way I was suggested was to edit the config file and add this section
devServer: {
host: "localhost"
}
And this is my whole config file
But my problems persisted
I'm new in vuejs and i hopeful that you can help me. Thanks.
Your project attempts to use WebSockets via socketjs.
You will need to run
npm install sockjs
see: https://www.npmjs.com/package/sockjs
You will also need to have a sockhost, see: https://webpack.js.org/configuration/dev-server/
create a fill named "vue.config.js" in main root.
add this scripts to the created fill:
module.exports = {
devServer: {
host: 'localhost',
hot: true,
disableHostCheck: true,
https: false
}
}
Maybe it's just due to a change of network, I think that if you restart the server or reconnect to original network it will dissapear.
Related
Steps to reproduce:
Install Vue CLI and create a new Vue CLI project vue create test-project.
Using Vue 3 and Yarn.
Update the vue.config.js file to point to a custom dev server with a proxy:
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: 'http://test.me',
},
});
Run yarn serve inside the project directory.
Go to http://localhost:8080 in Firefox and check out the console.
The websocket for the Webpack dev server keeps failing with the message The connection to ws://[ip]:8080/ws was interrupted while the page was loading.
This doesn't happen when there is no proxy. I cannot figure out why it's happening or how to stop it.
I'm trying to set up to run Nuxt 3 with HTTPS for localhost. I've looked at other guides and questions that were already asked online, but they all seem to be using older versions of Nuxt and for some reason, that way does not work anymore. For example, I've tried using this link as a reference on how to set up my nuxt.config.ts file, however, it's not working out for me.
When using the server property, I'm getting the error "server does not exist in type NuxtConfig", however, devServer seems to not give me any errors at least (still not working). Here's my
nuxt.config.file
import { fileURLToPath } from "node:url"
export default defineNuxtConfig({
css: ["~/assets/global.scss"],
experimental: {
reactivityTransform: true,
},
app: {
head: {
htmlAttrs: {
lang: "en",
},
},
},
devServer: {
https: {
key: fileURLToPath(new URL("~/certs/localhost-key.pem", import.meta.url)),
cert: fileURLToPath(new URL("~/certs/localhost.pem", import.meta.url)),
},
},
})
SSL certificate is created and self-signed using mkcert.
After I generate the SSL certificate and install everything and try to access https://localhost:3000, I get the error "SSL_ERROR_RX_RECORD_TOO_LONG".
I'd really appreciate if someone could help me out with this. I've never done this before so not really sure what I am doing and it's taking a while already to solve.
It seems I managed to find a way to set up HTTPS on localhost in the end.
Here's how I did it:
First I followed this short guide to set up & self-sign the SSL certificate. I also changed nuxt dev from the package.json file to the following nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem.
However, this gave me a 500 fetch failed error. This was solved by following this thread, which basically stated that you need to enable the NODE_TLS_REJECT_UNAUTHORIZED=0 variable.
Now everything seems to be working perfectly!
i have added devServer proxy target as
devServer: {
proxy: {
'^/': {
target: 'https://xmlpi-ea.dhl.com/',
ws: true,
changeOrigin: true
}
}
}
but it is not working when i make build with npm run build, is there a workaround for it?
This is for PRODUCTION not for development.
npm run build
If you are using vue-cli, you can spin you development server with
npm run serve
I recently upgraded my VUE CLI to 3.5.5
After running the standard install, I noticed CORS and websocket errors being thrown in the browser ...Connection closed before receiving a handshake response. The errors are thrown in both Firefox and Chrome.
I am guessing this has something to do with the webpack devserver and CORS but its a guess because I know nearly nothing about webpack.
I added a vue.config.js and tried various configs for the webpack devServer but none have worked.
Can anyone illuminate this issue? - it must be very common. Thanks
So the solution i found was to create a vue.config.js file at the root level of the project and use this webpack config:
module.exports = {
devServer: {
host: "0.0.0.0",
public: "0.0.0.0:8080",
disableHostCheck: true,
proxy: {
"/app": {
target: "http://localhost:8081",
changeOrigin: true,
ws: true
}
}
}
};
there.
I´m starting on VueJS, creating a project in codeanywhere:
npm install -g vue-cli
vue init webpack myProject
So, when i run npm run devi get a
Your application is running here: http://localhost:8080
Because, i am developing on a cloud based IDE, i´cant access http://localhost...
So, i access the way Codeanywhere publish when you create a project:
https://myProject-XXXXXXXX.codeanyapp.com/
But i get a
This Container is currently unaccessible.
Really appreciated any help.
I created a vue.config.js file at the root (next to package.json) with content:
module.exports = {
devServer: {
host: '0.0.0.0',
allowedHosts: [
'.codeanyapp.com'
]
}
};
From the Codeanywhere documentation:
You have to change the default IP so your Container could run externally.
Please change IP address on your container from 127.0.0.1 to 0.0.0.0.
Work for me with nuxt.config.js :
server: {
port: 3000,
host: '0.0.0.0',
timing: false
},