The difference between custom path alias assets and static folders in vue-cli

Write in front:

This is a brief introduction to several small knowledge points of vue-cli. It is suitable for students who are new to vue-cli scaffolding and who do not know much about it. , the big guys took a detour. Friends in need can make a reference. If you like it, you can like it or follow it. I hope it can help everyone.

Static resource processing:

The difference between assets and static folders

I believe many people know that vue-cli has two places to place static resources, which are ## Many people may not be clear about the difference between the #src/assets folder and the static folder.

The files in the assets directory will be processed and parsed into module dependencies by webpack, and only relative path forms are supported. For example, in and
background: url(./logo.png), "./logo. png" is a relative resource path that will be parsed by Webpack as a module dependency. Files in the

static/ directory will not be processed by Webpack: they will be copied directly to the final packaging directory (default is dist/static). These files must be referenced using absolute paths, which are determined through 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:

static holds files that will not change and assets holds files that may change.

How to reference images in js data

Because webpack will reference images as modules, you need to use require to reference images in js, and you cannot directly use strings. form.

js部分：
    data () {
        return {
             imgUrl: '图片地址',//错误写法 
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分：
img标签形式：
<img  src="/static/imghw/default1.png"  data-src="img"  class="lazy"  : / alt="The difference between custom path alias assets and static folders in vue-cli" >
或者p背景图形式：
<p :style="{backgroundImage: &#39;url(&#39; + img + &#39;)&#39;}"></p>

After talking about pictures, I just want to mention the configuration related to a picture of vue-cli. The configuration in the picture below means: perform base64 conversion below the 10000b picture, so if there are some relatively small ones in the project The icon no longer needs to be processed by the image wizard

webpack+vue custom path alias

vue-cli uses webpack, you can also use the webpack custom alias function to customize the alias This function

When you are nested in multi-layer folders, you don’t have to find the path layer by layer. You can directly use the custom alias to find the location of the file.

Setting method:

**Setting address: **webpack.base.conf.js file under the build folder

Specific settings:

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

How to use:

When using it, add a '~' in front of it like B in the screenshot below. Although webstorm here prompts an error, we You don't need to worry about it, the code will run normally.

Interpretation:

Here, 'static' is given an address, so when the path is introduced in the program, '~static' can directly replace the path'.. /static', personal test, even if there are multiple levels of nesting, the path can be found successfully.

Clean up useless plug-ins in the project

Many people, like me, will install a lot of plug-ins at the beginning, and then end up not using them in the project. . So many plug-ins have been installed before, and you have even forgotten which plug-ins you have installed?

package.json

At the location shown in the picture above, all module dependencies installed by our project are in this pageage.json file. When we When you need to sort out your own dependencies, you can check this file to see if there are any dependencies that are no longer useful. You can use the command line

npm remove module name to delete useless modules.

The difference between –save-dev and –save

Some of the above dependencies are modules that are only used in the development environment, and some are modules that will continue to be relied upon after the project goes online. The difference between them is that when we usually install module dependencies:

--save-dev and --save

When you use

-- When save-dev installs dependencies, it will be placed under the devDependencies object in package.json. On the contrary, when you use --save to install dependencies, it will appear under the dependencies object.

Summary:

* –save-dev is something you rely on when developing, –save is something you still rely on after publishing. *

I have written two articles before about vue-cli configuration. Students who need it can take a look:

Teach you how to use vue-cli scaffolding

Reference jQuery, bootstrap and use sass and less to write css in vue-cli scaffolding

Afterword

The above is the content of this article, which is some of my practice projects for a period of time Small accumulation, there will be some content in the follow-up, because the project is tight, I may meet you later.

The above is the detailed content of The difference between custom path alias assets and static folders in vue-cli. For more information, please follow other related articles on the PHP Chinese website!