Article From:https://www.cnblogs.com/vae860514/p/9060925.html

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.src/assetsFolders andstaticMany 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<img src="./logo.png"> 
Andbackground: 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.

    data () {
        return {
             imgUrl: 'Picture address' ',//Error writing
            imgUrl: require('Picture address' ')//The right way of writing
imgLabel form:
<img :src="img" />
Or P background map form:
<p :style="{backgroundImage: 'url(' + img + ')'}"></p>

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.

Setting method:

**Set address: webpack.base.conf.js file under **build folder.
Specific settings:

resolve: {
    extensions: ['.js''.vue''.json'],
     alias: {
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//Add this line of code

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.

Example picture

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:--save-devAnd--save

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. *

Leave a Reply

Your email address will not be published. Required fields are marked *