Turn from: the difference between custom path alias assets and static folder in vue-cli
Static resource processing:
assetsThe difference from the static folder
I believe many people know that vue-cli has two places to place static resources.
staticMany people may not be clear about the difference between the two.
assetsThe files in the directory are resolved by webpack processing as module dependencies.，Only the form of the relative path is supported. For example
background: url(./logo.png)The “./logo.png” is a relative resource path and will be parsed from Webpack to module dependency.
static/ The files in the directory will not be processed by Webpack: they will be copied directly to the final packaged directory (the default is dist/static).These files must be referenced using the absolute path, which is determined by the build.assetsPublicPath and build.assetsSubDirectory connections in the config.js file.
Any files placed in static/ need to be referenced in the form of absolute paths: /static/[filename].
In our actual development, in general:staticAssets files that will not change will be changed.
How to reference a picture in JS data
Because webpack will refer to the picture as a module, so in JS, you need to use require to import pictures, not directly in the form of strings.
When you say the picture, you can just mention the configuration of a picture of vue-cli. The following configuration means that the base64 conversion is done below the 10000b picture, so if some of the smaller icon in the project will not have to do the image wizard again.
webpack+vueCustom path alias
vue-cli Using webpack, you can also use the webpack custom alias function to customize the alias function.When you are nesting in a multi tier folder, you do not have to look for the path one level at a time. You can find the location of the file directly using the custom alias.
**Set address: webpack.base.conf.js file under **build folder.
Way of use:
When you use it, you want to add a ‘~’ in front of the B at the bottom of the screenshot, and the webstorm here, although it’s wrong, we don’t use the tube, and the code runs normally.
Here ‘static’ is given an address, so when the path is introduced in the program, the ‘~static’ can replace the path ‘../static’ directly, and it can be successfully found, even if the multilayer nesting can find the path successfully.
Clean up the useless plug-ins in the project
Many people, like me, will install many plug-ins at the very beginning, and then they will not be used in the project. There were too many plug-ins installed before, and I forgot what plug-ins I installed.
In the location shown above, all the module dependency of our project is in this pageage.json file. When we need to organize a wave of our own dependency, we can find a dependency in this file that is not available now, and you can use the command line.
npm remove Module nameTo delete the useless module.
–save-devThe difference between the – and – save
The above ones rely on some modules that are only used in the development environment, and some continue to rely on modules after the project is launched. The difference between them is that we usually install module dependencies:
When you use it
--save-devWhen installation is dependent, it will be placed under the devDependencies object of package.json.
--saveWhen installation is dependent, it will appear below the dependencies object.
Conclusion: * – save-dev is what you rely on when you develop, save is what you rely on after you release. *