I want to develop a Vue app and serve it to external domain.
So I wrote a vue.config.js to redirect development server to public like below:
module.exports = {
devServer: {
disableHostCheck: true,
host: '0.0.0.0',
port: 8080,
public: 'mypublicpage.com:8080',
},
publicPath: '/'
}
Just before few hours ago, I got the expected result of above setting file like this
App running at:
- Local: http://localhost:8080
- Network: http://mypublicpage.com:8080/
But now my Local port is always randomized, so I can't access my Vue app through the public(Network) URL. I still don't know why this happens.
App running at:
- Local: http://localhost:19282 port changes on every npm run serve
- Network: http://mypublicpage.com:8080/
Related
while running the yarn serve I don't what to display the port no from the URL. Now, this is showing like https://example.com:8080. I want to access them from https://example.com.
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'example.com',
https: false,
port: 8080,
public: 'example.com'
},
}
The yarn serve command opens this port to serve the app locally (for testing / developing).
If you want to create your application, you probably want to run:
yarn run build
See SO - yarn build command
You can then upload the generated files. Look for a build or dist directory or similar.
You can add publicPath to your configuration:
module.exports = {
publicPath: "./",
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'example.com',
https: false,
port: 8080,
public: 'example.com'
},
}
You can try this and see if it works.
See webpack configuration docs
Just open the index.html in the dist folder with live server
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
I'm using the following vue.config.js:
module.exports = {
devServer: {
proxy: 'http://localhost:8000'
},
publicPath: '/admin/',
outputDir: '../backend/admin/'
}
And I'm running node application on port 8000 as a backend service,vue frontend is run with vue-cli-service serve and issue is that websocket connection for HMR is being proxied to backend.
HMR works but we are constantly getting requests to backend like:
/sockjs-node/931/f1p0xflp/websocket
How can we disable this backend calls as they are invalid?
Adding:
ws: false
in vue.config.js resolved the issue
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
},
I've set vue.config.js like this:
module.exports = {
devServer: {
contentBase: ".",
host: "0.0.0.0",
port: 8080,
disableHostCheck: true
}
};
When I run npm run serve, I can open it on localhost, but not with my public ip 125.xxx.
I've setted up my router to port forward 80 to 192.168.x.x:8080.
As you can see, it said Javascript is not enabled.
It's worked with plain HTML.
It's worked with Backend Express
Only vue not worked