Difference between base and publicPath in vue development

Preface: I wonder if you guys have encountered such a problem, which is that the local development is good, but after packaging, I am confidently handed over to the operation and maintenance deployment. Once it goes online, the page resources cannot be found, and the page will be redirected to the white screen. For various problems, this is most likely a configuration issue. There are two configurations, base and publicPath, which are different in vue2 and vue3, and will be introduced in detail below. These two configurations generally affect the generation environment and have no impact on local development.

1. publicPath

publicPath affects the acquisition of external resources after packaging.

For example: If the configuration is publicPath: "./" or publicPath: "", then the resource in the package is the relative path introduced. The access resource is under /assets/, which is no problem. However, if the access route /a/b/c is only one single page project, the resource path is /a/b/assets/ at this time, which is wrong. If you cannot get the resources, you will report an error. So we need to set this value to the absolute path publicPath: "/". Then no matter where the route jumps, the resources are all under /assets/.

The configuration in vue2 is actually the configuration of webpack.

 = {
  publicPath: "/",
};

The configuration in vue3 is actually a configuration of vite.

import { defineConfig } from "vite";

export default defineConfig(() => {
  return {
    base: "/",
  };
});

2. base

base affects component matching.

If the operation and maintenance deploy our site to a subdirectory. For example, under the admin folder. If the routing matches the components, there may be problems online. For example, if we convert /user into a complete path, it is /user to match components, but if /admin/user is used to match components in production, it will definitely not match. Therefore, we need to configure base: "/admin" in the router configuration.

Configure base in vue2

import VueRouter from "vue-router";

const router = new VueRouter({
  base: "/admin",
});

Configuring base in vue3 is the first parameter to configure createWebHistory()

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory("/admin"),
});

Summary: Generally, we will write these two values ​​in the environment variables, and we can directly modify them without changing the internal code.

This is the end of this article about the difference between base and publicPath in vue development. For more related vue base publicPath content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!