Vue3 京东到家项目
项目首页开发
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:
// vue.config.js/**
* @type {import('@vue/cli-service').ProjectOptions}
*/module.exports = {
// options...}
Or, you can use the defineConfig helper from @vue/cli-service, which could provide better intellisense support:
// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({
// options...})
Deprecated since Vue CLI 3.3, please use publicPath instead.
Type: string
Default: '/'
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. https://www.my-app.com/. 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 https://www.foobar.com/my-app/, set publicPath to '/my-app/'.
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:
This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'}You are using HTML5 history.pushState routing;
You are using the pages option to build a multi-paged app.
Type: string
Default: 'dist'
The directory where the production build files will be generated in when running vue-cli-service build. Note the target directory contents will be removed before building (this behavior can be disabled by passing --no-clean when building).
TIP
Always use outputDir instead of modifying webpack output.path.
Type: string
Default: ''
A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
TIP
assetsDir is ignored when overwriting the filename or chunkFilename from the generated assets.
Type: string
Default: 'index.html'
Specify the output path for the generated index.html (relative to outputDir). Can also be an absolute path.
Type: boolean
Default: true
By default, generated static assets contains hashes in their filenames for better caching control. However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML generated by Vue CLI, you can disable filename hashing by setting this option to false.
Type: Object
Default: undefined
Build the app in multi-page mode. Each "page" should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either:
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/index/main.js',
// the source template
template: 'public/index.html',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
subpage: 'src/subpage/main.js'
}}TIP
When building in multi-page mode, the webpack config will contain different plugins (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin). Make sure to run vue inspect if you are trying to modify the options for those plugins.
An object that specifies its entry, template, filename, title and chunks (all optional except entry). Any other properties added beside those will also be passed directly to html-webpack-plugin, allowing user to customize said plugin;
Or a string specifying its entry.
Type: boolean | 'warning' | 'default' | 'error'
Default: 'default'
Whether to perform lint-on-save during development using eslint-loader. This value is respected only when @vue/cli-plugin-eslint is installed.
When set to true or 'warning', eslint-loader will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.
To make lint errors show up in the browser overlay, you can use lintOnSave: 'default'. This will force eslint-loader to actually emit errors. this also means lint errors will now cause the compilation to fail.
Setting it to 'error' will force eslint-loader to emit warnings as errors as well, which means warnings will also show up in the overlay.
Alternatively, you can configure the overlay to display both warnings and errors:
// vue.config.jsmodule.exports = {
devServer: {
overlay: {
warnings: true,
errors: true
}
}}When lintOnSave is a truthy value, eslint-loader will be applied in both development and production. If you want to disable eslint-loader during production build, you can use the following config:
// vue.config.jsmodule.exports = {
lintOnSave: process.env.NODE_ENV !== 'production'}Type: boolean
Default: false
Whether to use the build of Vue core that includes the runtime compiler. Setting it to true will allow you to use the template option in Vue components, but will incur around an extra 10kb payload for your app.
See also: Runtime + Compiler vs. Runtime only.
Type: boolean | Array<string | RegExp>
Default: false
By default babel-loader ignores all files inside node_modules. You can enable this option to avoid unexpected untranspiled code from third-party dependencies.
Transpiling all the dependencies could slow down the build process, though. If build performance is a concern, you can explicitly transpile only some of the dependencies by passing an array of package names or name patterns to this option.
Jest config
This option is not respected by the cli-unit-jest plugin, because in jest, we don't have to transpile code from /node_modules unless it uses non-standard features - Node >8.11 supports the latest ECMAScript features already.
However, jest sometimes has to transform content from node_modules if that code uses ES6 import/export syntax. In that case, use the transformIgnorePatterns option in jest.config.js.
See the plugin's README for more information.
Type: boolean
Default: true
Setting this to false can speed up production builds if you don't need source maps for production.
Type: string
Default: undefined
Configure the crossorigin attribute on <link rel="stylesheet"> and <script> tags in generated HTML.
Note that this only affects tags injected by html-webpack-plugin - tags directly added in the source template (public/index.html) are not affected.
See also: CORS settings attributes
Type: boolean
Default: false
Set to true to enable Subresource Integrity (SRI) on <link rel="stylesheet"> and <script> tags in generated HTML. If you are hosting your built files on a CDN, it is a good idea to enable this for additional security.
Note that this only affects tags injected by html-webpack-plugin - tags directly added in the source template (public/index.html) are not affected.
Also, when SRI is enabled, preload resource hints are disabled due to a bug in Chrome which causes the resources to be downloaded twice.
Type: Object | Function
If the value is an Object, it will be merged into the final config using webpack-merge.
If the value is a function, it will receive the resolved config as the argument. The function can either mutate the config and return nothing, OR return a cloned or merged version of the config.
Type: Function
A function that will receive an instance of ChainableConfig powered by webpack-chain. Allows for more fine-grained modification of the internal webpack config.
See also: Working with Webpack > Chaining