Vue Cli Service Dev

Posted on  by admin

Generator #

Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service.

  • You can access the binary directly as vue-cli-service in npm scripts, or as ./node_modules/.bin/vue-cli-service from the terminal.
  • This is what you will see in the package.json of a project using the default preset:.
  • You can invoke these scripts using either npm or Yarn:. If you have npx available (should be bundled with an up-to-date version of npm), you can also invoke the binary directly with:.

You can run scripts with additional features using the GUI with the vue ui command. Here is the Webpack Analyzer from the GUI in action:. Copying to clipboard might not work on a few platforms.

If copying was successful, (copied to clipboard) is displayed next to the local dev server URL. The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box. In addition to the command line flags, you can also configure the dev server using the devServer field in vue.config.js.

[entry] in the CLI command is defined as the entry file (default: src/main.js or src/main.ts in TypeScript project), not an additional entry file. If you overwrite the entry in the CLI, then the entries from config.pages are no longer considered, which may cause an error.

vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.

There are a few useful flags:. --modern builds your app using Modern Mode, shipping native ES2015 code to modern browsers that support it, with auto fallback to a legacy bundle.

--target allows you to build any component(s) inside your project as a library or as web components. See Build Targets for more details. --report and --report-json will generate reports based on your build stats that can help you analyze the size of the modules included in your bundle.

You can use vue-cli-service inspect to inspect the webpack config inside a Vue CLI project.

See Inspecting Webpack Config for more details. Some CLI plugins will inject additional commands to vue-cli-service. For example, @vue/cli-plugin-eslint injects the vue-cli-service lint command.

vue-cli-service inspect #

You can see all injected commands by running:. You can also learn about the available options of each command with:.

You can exclude specific plugins when running a command by passing the name of the plugin to the --skip-plugins option:.

This option is available for everyvue-cli-service command, including custom ones added by other plugins.

You can skip multiple plugins by passing their names as a comma-separated list or by repeating the argument:.

Plugin names are resolved the same way they are during install, as described here. cache-loader is enabled for Vue/Babel/TypeScript compilations by default.

Files are cached inside node_modules/.cache - if running into compilation issues, always try deleting the cache directory first. thread-loader will be enabled for Babel/TypeScript transpilation when the machine has more than 1 CPU cores. When installed, @vue/cli-service also installs yorkie, which allows you to easily specify Git hooks using the gitHooks field in your package.json:.

yorkie is a fork of husky and is not compatible with the latter. Projects created via vue create are ready to go without the need for additional configuration.

The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts.

However, we also understand that it's impossible to cater to every possible need, and the needs of a project may also change over time.

Projects created by Vue CLI allow you to configure almost every aspect of the tooling without ever needing to eject. Check out the Config Reference for more details.

Modified11 months ago. I just tried creating a new project with @vue/cli 4.3.1, fresh install of Ubuntu 19.10, npm 6.14.4. When I cd into the project and run npm install, I get the following:.

Running npm audit fix produces. Upon running npm audit, I get. Is this expected? Possible to fix? It worries me that this happens with such a clean environment where nothing malicious was installed, but then I'm also not an npm expert..

# Target Browsers

What should I do here? Tobias FeilTobias Feil. I was setting up a new Vue project and got the same issue.

I was able to find a post on Github Vue/Vue-cli where they address the issue:.

  • That post says they are tracking the issue, but as a note:. Note: as it's only used for the local development server, it's not an actual security vulnerability on Vue CLI projects.

  • Feel free to ignore it if @vue/cli-service is the only source of this dependency in your project. So, I have gone ahead and ignored it for the time being. I hope that when they update the NPM package, it will use an updated http-proxy, which addresses the issue.

According to the tracker itself, it says it is fixed in http-proxy version 1.18.1. I suggest, before creating vue cli project, upgrade node and npm to the newest versions available.

Skipping Plugins #

I've had the same problem and this solved it partially for me(from 108 vulnerabilities before, to 45 after).

Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with your editor of choice to change the saved options.

You can also use the vue config command to inspect or modify the global CLI config. See the Browser Compatibility section in guide.

  • vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json). You can also use the vue field in package.json, but do note in that case you will be limited to JSON-compatible values only.
  • The file should export an object containing options:. Deprecated since Vue CLI 3.3, please use publicPath instead. The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3).

This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at, set publicPath to '/my-app/'.

# vue.config.js

The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.

Limitations of relative publicPath. Relative publicPath has some limitations and should be avoided when:. You are using HTML5 history.pushState routing;. You are using the pages option to build a multi-paged app.