How to solve the problem that Vue does not run when modifying the configuration file

With the continuous development of front-end development technology, the Vue framework has become a very important tool. During development using the Vue framework, modifying configuration files is a very common operation. However, it is very common to modify the configuration file without running it. So, how to solve this problem? This article will introduce you how to solve the problem of Vue not running modified configuration files.

First of all, it needs to be made clear that there are two configuration files for the Vue framework, one is Vue's default configuration file vue.config.js, and the other is Webpack's configuration file webpack.config.js. During development, we need to modify these two configuration files to meet different needs. However, sometimes we modify these two configuration files but find that the Vue framework does not run these modifications.

For Vue's default configuration file vue.config.js, a common situation is to modify the theme color of the third-party library (such as ElementUI, AntDesign, etc.) referenced by the file. At this time we need to add the following code to vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A'
        },
        javascriptEnabled: true
      }
    }
  }
}

However, when we saved the changes and re-ran the Vue project, we found that the theme color had not been modified. This is because the Vue default configuration file will only be parsed and applied when running the Vue-cli-service command. If we modify the configuration file without re-running the command, the Vue framework will not read our modifications.

The solution to this problem is very simple, just add the --config option to the command. For example, if we want to modify the theme color, we need to run the following command:

vue-cli-service serve --config vue.config.js

In this way, the Vue framework can read our modifications.

There are similar problems for the Webpack configuration file webpack.config.js. For example, we want to modify the entry file path of Webpack and add the following code to webpack.config.js:

module.exports = {
  entry: './src/index.js'
}

Similarly, when we re-run the Vue project after saving the modification, we found that Webpack did not read it. Our configuration modifications. This is because Webpack will only read the configuration file named webpack.config.js by default. If we want Webpack to read other files, we need to add the --config option to the command, for example:

vue-cli-service serve --config myWebpackConfig.js

In this way, Webpack can read our modifications.

To summarize, if we find that the Vue framework does not run these modifications when modifying the Vue configuration file, we need to pay attention to the following points:

1. After modifying the configuration file, be sure to run it again Corresponding commands so that Vue can read our modifications.
2. For the Vue default configuration file, you need to add the --config option to the command so that Vue can read the configuration file we specify.
3. For the Webpack configuration file, you also need to add the --config option to the command.

I hope the above content can help you solve the problem of Vue not running to modify the configuration file, allowing you to develop the Vue framework more smoothly.

The above is the detailed content of How to solve the problem that Vue does not run when modifying the configuration file. For more information, please follow other related articles on the PHP Chinese website!