The style and background image path cannot be found when the Vue item is packaged

Source: Internet
Author: User

Problem Description: When the Vue project is packaged, the file is found, but the referenced font and background image cannot be found;

Workaround:

It is primarily necessary to configure Publicpath for CSS separately.
Extracttextwebpackplugin provides a Options.publicpath API that can be configured separately for the CSS Publicpath.

For projects built with VUE-CLI, the DIST directory structure is as follows:

Dist
├──index.html
└──static
    ├──css
    ├──img
    └──js

The frequently encountered problem is that the relative path of background-image in CSS is not referenced correctly in the IMG folder. But with Extracttextwebpackplugin's publicpath configuration, you can.

Change the options configuration of the Extracttextplugin plugin in the Build/utils.js file:

if (options.extract) {
  return extracttextplugin.extract ({
    use:loaders,
    publicpath: '). /.. /',         //Note Configure this section to freely adjust fallback according to the directory structure
    : ' Vue-style-loader '}
} else {
  return [' Vue-style-loader '] . Concat (loaders)
}
Detailed reference: http://blog.csdn.net/lx583274568/article/details/50898366

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.