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
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 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/
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
I created a project using #vue/cli 3 and attempted to add the autoOpenBrowser option and received the following error. So, I gather that this option is no longer available?
ERROR WebpackDevServerOptionsValidationError: Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'autoOpenBrowser'. These properties are valid:
object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, logLevel?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, logTime?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }
module.exports = {
devServer: {
port: 4020,
autoOpenBrowser: true
}
}
Create vue.config.js file at root level and add your code in this file. Running the command npm run serve will automatically open your application in browser.
module.exports = {
devServer: {
port: 8080,
open: true
}
}
Duh, it was the open option... I was confusing the config/index.js file with webpack.config.js.
module.exports = {
devServer: {
port: 4020,
open: true
}
}