Webpack/vue-PublicPath difference in CLI

/,/,/my-app/ Why don’t you open it? It’s a bit clickbait

Webpack /vue- The difference between publicPath/and./ in cli

Before addressing this issue, the vue-CLI configuration documentation is very clear about publicPath

Webpack’s description of publicPath is relatively weak. But vue-cli is also a black box for us, and we only know that publicPath can be configured with custom urls like ‘,./ or /my-app/. But do you really understand publicPath in WebPack?

Prepare the environment

• Nginx emulates a real URL and high simulation project
• The Webpack itself writes a section of the Webpack and reproduces the corresponding scene

If you don’t want to write the webpack configuration from scratch, you can get the demo webpack_config directly from one of my repositories because I was digging into publicPath while writing this configuration

PS: If using my Webpack repository, after pulling down the code, check to see if it branches in V0.0.2!

If you’re too new to Nginx and Webpack, check out the following description

Configuration of the environment

• Nginx. conf Nginx configuration is not complex, assign a domain name to it, point to port 80, specify the entry file, the entry file can be directly found in index.html

server {
  listen        80;
  server_name  public_path.com;
  root   "E:/Desktop/publicPathDemo/webpack_config/dist";
  location / {
      index index.html index.php;
      autoindex  on;
      if (!-e $request_filename) {
          rewrite  ^(.*)$  /index.php?s=/$1  last;
          break;
      }
  }
}
Copy the code

• Modify the host file to add a domain name

127.0.0.1 public_path.com
Copy the code

• In the prepared WebPack project, package up a dist file

With everything in place, go to public_path.com

With the environment ready, explore publicPath

PublicPath use of ‘/’

Modify a few places:

• webpack.base.js

  • Modify the output publicPath for'/'.
  • Modify theMiniCssExtractPlugin.loaderThe inside of thepublicPathNote him out

• webpack.dev.js

  • Modify the output publicPath for'/'.

• webpack.prod.js

  • Modify the output publicPath for'/'.

• Then run NPM Run Build to update a package

• Run NPM Run Serve to run a copy of the development environment. Open your browser at http://localhost:8080/

Circle the key

index.html

Resources for images in the CSS

Localhost CSS

Change the URL of the project

All resources are prefixed with a slash. Yes, that’s what publicPath does. At present, the domain name we test is http://public_path.com/. What will you do if one day, the boss asks us to change the URL and we need to visit http://public_path.com/vue/ to access our current page?

If you are familiar with NGINx, you should have the answer, because the domain name points to the /dist/ folder, and the URL is actually the same as our resource manager, we just need to nest the folder, the URL can find all the way down, so let’s adjust the project folder

Visit http://public_path.com/ again and the result is as follows:

Enter the vUE folder

Is nginx wrong? No, the resource path is wrong. Because in theindex.html, the JS resource we introduced is/It will ignore the URL hierarchy and start looking for files at the top level, which of course it will not find

PublicPath :’/’ The first drawback arises: migrating projects/in the case of projects with complex urls, it is very easy to find resources

PublicPath uses ‘./’ or ”

Since./ and ” are an effect on relative paths after packaging is complete, we use relatively clear./ to demonstrate :::

Modify a few places:

• webpack.base.js

  • Modify the output publicPath for'/'.
  • Modify theMiniCssExtractPlugin.loaderThe inside of thepublicPathNote him out

• webpack.dev.js

  • Modify the output publicPath for'/'.

• webpack.prod.js

  • Modify the output publicPath for'/'.

• Then run NPM Run Build to update the package (build automatically empties the dist directory and regenerates the file)

• Run NPM Run Serve to run a copy of the development environment. Open your browser at http://localhost:8080/

As usual, look at a few files:

index.html

Resources in the CSS file

In localhost

So let’s go to the dist directory in localhost

Why is the http://public_path.com/ picture not displayed

• In the http://public_path.com/ project, the images are not shown because my Webpack is configured with CSS file separation, but my images are also packaged separatelyassets/images/Directory. After separation, the introduction of images is still the relative path. /

Compare the path of images imported using the IMG tag with the path of images imported using CSS. You can see that CSS introduces an image with an extra URLcss

Localhost = “localhost”;

In the same way as nginx, it was pointed to the dist folder, but when publicPath is configured, the folder is pointed up one level, so that you can see the directory including the dist folder

Dist in localhost

The resources in this section are the same as those in http://public_path.com/, with an extra layer of CSS due to the relative path problem

Are there so many problems with using./? Continue to look at directory changes

Change the URL of the project

As before, add another layer of vue folder and go to http://public_path.com/vue/

That’s right, instead of a blank page, this at least changes the directory structure and resources are still available. Since the./ and ‘are used to access relative paths, not absolute paths, as long as the relative paths of the index.html and resource folders are not changed, the project can be migrated.

Unletter can be migrated in a layer:

PublicPath :’./’ Disadvantages: If WebPack has style separation, especially in vue, CSS and images are stored in separate folders. When you migrate a project, because you’re using a relative path, you can almost always find the corresponding resource no matter how the URL changes, right

Can publicPath learn from each other in ‘/’ and ‘./’?

Where is the feasibility?

As you can see from the above screenshots and demo, publicPath:’./’ is worse than the CSS packaging, because the CSS is separated, there is a layer of folder, and the image is separated, not under the CSS folder. PublicPath :’/’, on the other hand, allows resources to be found directly from the root directory. So we just need to solve the relationship between the image file and the CSS folder, and the first problem is solved. In fact, the project is built by ourselves, and we control the CSS and the output of the image, so we just need to handle the publicPth when working with the CSS image, but we can’t directly use /, Since it is still a migration project issue, we can consider using.. / images and CSS, just a layer of folder nesting! Why? Because CSS and image output is also under our control, think about it, isn’t that true? (For this webpack is this reason, different projects, respectively discussed ~, the principle is the same)

There is also a publicPath:’./’ in local development, all open directories, add /dist/ access always feel inappropriate. Use webpack’s multi-environment configuration. In dev, use/to make sure localhost works, and use./ instead

Modify the configuration

• webpack.base.js
  • Modify the output publicPath for'/'. (This will not matter much, as it will be overwritten by later configurations)
  • Modify theMiniCssExtractPlugin.loaderThe inside of thepublicPath 为 ../
• webpack.dev.js
  • Modify the output publicPath for'/'.
• webpack.prod.js
  • Modify the output publicPath for'/'.

Repackage and run again

The url to access:

Localhost access:

Add vue folder in access:

Can only say: perfect ~

Another /my-app/ scenario

At first, the vue-CLI configuration also gave a scenario where publicPatch was /my-app/. In fact, this scenario is very similar to the one we used with the Vue folder. We can also simulate it.

When does this happen, it is to put projects in a fixed folder, such as Gitee Pages in the code cloud? Now my blog is to run in the yards cloud gitee pages, the yard cloud to my assigned link is http://jioho.gitee.io/blog/, so this time I publicPath’s blog will be needed.

Change the file:

• webpack.base.js
  • Modify the output publicPath for'/my-app/'. (This will not matter much, as it will be overwritten by later configurations)
  • Modify theMiniCssExtractPlugin.loaderThe inside of thepublicPath 为 /my-app/
• webpack.dev.js
  • Modify the output publicPath for'/my-app/'.
• webpack.prod.js
  • Modify the output publicPath for'/my-app/'.

Then rerun and repackage to see the effect:

• Index.html, as expected, adds /my-app/ in front of it. So CSS resources and image resources are no exception

Since the prefix is specified, it is also necessary to add it when using native development/my-app/

Including when I write a local preview of my blog, vuepress will do the sameblogHelp me to take

In this case, nginx might do some sort of reverse proxy or redirection or something like that. Not that it won’t write this configuration, but it’s beyond the scope of today’s discussion, so I’m not going to debug it

Platforms like this have previously specified the /my-app/ prefix to allow you to deploy a project, instead using ‘./’+ CSS resource use ‘.. If you’re using vue-CLI or if you’re using Vuepress and don’t build your own webpack like I am, you can just pass in publicPath and let the application handle it internally

To summarize

Three cases of publicPath

./ or blank

• Benefits: Can be deployed to any domain name, because the relative path, as long as the entire project migration, no problem
• Cons: Only if the scaffolding/Webpack is supported. /In this case, if you encounter the common CSS separation, image folder separation separately, it depends on the internal processing, I think vue-CLI is also similar to my processing method, after all, where the packaged resources are put, vue-CLI has the final say ~

/ situation

• Benefits: You don’t have to worry too much about resources. Basically, you can start searching from the root directory after packaging. Most of webPack resources also start searching from the support root directory
• Disadvantages: the project migrates when GG, must be deployed in the domain, immediately following the.com/.cn… After that, you cannot insert any route prefixes

Customize the domain name behind.com

There are no advantages or disadvantages to this, because it is the limitation of the platform, which can not be broken through, only to obey 🙂