Vue Cli 3 vue.config.js no autoOpenBrowser option - vue.js

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
}
}

Related

How can remove the port number from live vue site url?

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

In NuxtJS How to configure different paths for publicPath, outputDir, and indexPath

I have situation when i deploy NuxtJS App for production that I need put files in different paths.
I used this configurations before in Vue App in vue.config.js and it’s works fine:
module.exports = {
publicPath:'/assets/my_app/my_page/',
outputDir: path.resolve('../my_app/public/my_page'),
indexPath: path.resolve('../my_app/www/my_page.html'),
devServer: {
allowedHosts: ["my_site.com"],
proxy: {
'^/api': serverProxy,
'^/assets': serverProxy,
'^/files': serverProxy
}
}
};
How can do the same configurations in NuxtJS?
I tried this in nuxt.config.js but it not working:
build: {
publicPath:'/assets/my_app/my_page/',
// outputDir: path.resolve('../my_app/public/my_page'),
},
generate: {
dir: path.resolve('../my_app/www/my_page.html'),
},
there are different Dir properties that you can use in nuxt.config. I think
buildDir ,rootDir or srcDir can help you. However, you can access vue configuration and use your old solution by :
nuxt.config vue.config property

Using browser-sync with vue js and framework7

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
}
)
]
}

ERROR Invalid options in vue.config.js: "build" is not allowed. "dev" is not allowed

I have an existing vue-cli 2 app that I'm attempting to upgrade to vue-cli-3. After adding my unique dependencies, I dropped src/ right into the newly created vue-cli-3 app and started up. woot!
How do I manage [PROD|DEV|TEST].env.js now that we use vue.config.js?
I got the following error because my first attempt to create a vue.config.js was to simply rename config/index.js to be /vue.config.js and keep the existing /config/[PROD|DEV|TEST].env.js but I got the following error:
ERROR Invalid options in vue.config.js: "build" is not allowed. "dev"
is not allowed error Command failed with exit code 1.
I don't understand how environments are now managed.
Thanks for your time!
May be you should use devServer instead. And for build I guess there is another name now.
For example:
module.exports = {
devServer: {
// your settings
}
}
For example:
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
Reference: vue-cli

Browser reloaded before server with grunt-express-server and grunt-contrib-watch

I am trying to use grunt-contrib-watch together with grunt-express-server to reload my express server and the browser page whenever I made changes to the javascript files. The problem I am having is that the page reloads before the server is ready, so I get a "can't establish a connection to the server at localhost:3000."
Here is my Gruntfile.js:
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
express: {
dev: {
options: {
script: 'gui-resources/scripts/js/server.js'
}
}
},
watch: {
express: {
files: ['gui-resources/scripts/js/**/*.js'],
tasks: ['express:dev'],
options: {
livereload: true,
spawn: false
}
}
}
});
// Load all grunt tasks declared in package.json
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['express:dev', 'watch'])
};
In my server.js file I start the server with:
var port = 3000;
app.listen(port, function() {
console.log('Listening on port %d', port);
});
I found this similar question, but the solution proposed there doesn't apply on my case, since I am logging some output when the server is started, but the race condition appears anyway.
Update:
If I remove 'spawn: false' from watch:express config, everything works but express logs an error when started:
Error: listen EADDRINUSE
at errnoException (net.js:878:11)
at Server._listen2 (net.js:1016:14)
at listen (net.js:1038:10)
at Server.listen (net.js:1104:5)
at Function.app.listen (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/express/lib/application.js:533:24)
at /Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/gui-resources/scripts/js/server.js:86:13
at Object.context.execCb (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1890:33)
at Object.Module.check (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1106:51)
at Object.<anonymous> (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1353:34)
at /Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:372:23
Strange enough, in spite of the error the server and the page reload correctly.
Here is my code (the real Gruntfile is bigger, but I removed the parts not related to watch or express to make the question more readable).
I think you should be able to use the debounceDelay option with livereload to wait a bit longer until your server is ready:
watch: {
express: {
files: ['gui-resources/scripts/js/**/*.js'],
tasks: ['express:dev'],
options: {
livereload: true,
spawn: false,
debounceDelay: 1000 // in milliseconds
}
}
}