vue cli 3 deployment resource path

Vue CLI 3 is a scaffolding tool based on Webpack officially provided by Vue.js, which is used to quickly build Vue.js projects. With the popularity of Vue.js in large-scale applications, Vue CLI 3 has also become an indispensable part of front-end development. However, when actually deploying Vue CLI 3 projects, many developers will encounter resource path problems, causing the project to fail to run normally. This article will introduce in detail the problems and solutions of Vue CLI 3 deployment resource path.

1. The default resource path of Vue CLI 3

The default resource path in Vue CLI 3 is a relative path, that is, "./". This means that Vue CLI 3 will automatically identify the directory where your resource files (such as images, CSS, JS, etc.) are located and compile them into relative paths to ensure correct access in any environment.

2. The occurrence of problems

The default resource path of Vue CLI 3 seems very convenient, but you will still encounter some problems in actual application. One of the common problems is that the packaged resource path is incorrect, causing the web page to not display properly. This problem is usually caused by projects being deployed to different environments with different paths.

For example, if the Vue CLI 3 project is deployed to the root directory of the server, its resource path should be "/static/example.png". However, if the Vue CLI 3 project is deployed to a subdirectory on the server, its resource path will become "/subdir/static/example.png". At this time, if you use the default relative path of Vue CLI 3, the resource file cannot be read correctly, causing the web page to not display properly.

3. Solution

In order to solve the problem of resource paths, Vue CLI 3 provides a variety of ways to set resource paths. We can choose one of the ways to solve the problem according to actual needs.

1. Use the publicPath parameter

In the vue.config.js file, you can use the publicPath parameter to set the resource path. The publicPath parameter specifies the relative path of the packaged resource file, which can be an absolute path or a relative path. For example:

module.exports = {
  publicPath: '/subdir/'
};

The above code adds the "/subdir/" prefix to all resource file paths, so that the corresponding resource files can be loaded correctly even if they are deployed to a subdirectory.

2. Using environment variables

In some scenarios, we may need to dynamically modify the resource path according to different deployment environments. At this time, we can use environment variables to solve the problem.

In the vue.config.js configuration file, you can use the process.env.NODE_ENV environment variable to determine the environment of the current project. In the development environment, we can set the resource path to a relative path. In the production environment, we can set the resource path to an absolute path to ensure that the project can correctly load the corresponding resource files in different environments. For example:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-website/'
    : '/'
};

In the above code, if the project is in a production environment, the resource path is "/my-website/", otherwise it is a relative path.

3. Using CDN

In some high-traffic projects, we need to use CDN to speed up the loading of resource files. At this time, we can use the webpack configuration provided by Vue CLI 3 to set the CDN path. In vue.config.js, you can customize the Webpack configuration through the chainWebpack method. For example:

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = 'https://cdn.example.com/';
        return args;
      });
  }
};

In the above code, we use the chainWebpack method to customize the Webpack configuration, and set the cdn attribute in the configuration parameters of the html-webpack-plugin plug-in to the path of the CDN "https://cdn.example .com/”.

4. Summary

Vue CLI 3 is a powerful scaffolding tool that can quickly build Vue.js projects. However, in actual applications, there may be problems with the default resource path of Vue CLI 3, causing the project to fail to run properly. In order to solve this problem, we can customize the resource path by setting the publicPath parameter, using environment variables, or using CDN to ensure that the project can correctly load the corresponding resource files in different environments. This article introduces these solutions and hopes to be helpful to everyone.

The above is the detailed content of vue cli 3 deployment resource path. For more information, please follow other related articles on the PHP Chinese website!