Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the vue-cli3+webpack hot update failure". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the vue-cli3+webpack hot update failure".

Vue-cli3+webpack hot update invalidation 1. Tell me the cause.

A project encountered problems, hot update failure, puzzled, query search vuecli3 hot update failure, vue histroy mode hot update failure, see a lot of methods on the Internet, npm reinstallation, do not use Taobao image cnpm installation; npm installation yarn, and then use yarn re-install,yarn serve startup, npm run serve startup and other methods are not easy to use.

Github has a similar problem with https://github.com/vuejs/vue-cli/issues/1559, which was once inspired by a different version.

Compare several configuration files of the hot update normal project B, focus on the package.json file, and find that there are different versions of webpack.

two。 Solution

Initially determined to be the reason for the webpack version, the search keyword becomes webpack4.0 hot update invalid, webpack4.0 hot update turned on, thus the query attempt. The reason is probably that webpack4.0 needs to be manually configured to enable hot updates. It is not enabled by default.

2.1.The partial installation depends on webpack-dev-server

Npm install-save-dev webpack-dev-server

2.2.Configuring relevant parameters in webpack.config.js

Increase the configuration of devServer

Const path = require ('path'); module.exports = {entry:'. / index.js', output: {path: path.resolve (_ _ dirname, 'dist'), filename:' youname.js'}, plugins: [], devServer: {contentBase: path.join (_ _ dirname, 'page'), compress: true, port: 8080}}

2.3.Add commands to the scripts object in package.json to enable local services

"server": "webpack-dev-server-open"

If server has other commands to execute, just add this command at the end

2.4.Configuration of vue.config.js to enable hot updates

DevServer: {disableHostCheck: true,//webpack4.0 enable hot update}

2.5.Finally execute npm run server to solve the problem of hot update failure.

Unable to perform hot update problem

In the vue project, the previous hot update was good, but suddenly found that it failed on macos, and the modified code needed to be restarted by npm run dev to update, which greatly affected the development efficiency, but not all pages were like this.

Then a large crater was found, and the file name was incorrect in case with the actual path folder name. But it works.

Solution.

Check that the folder name is correct and make sure that the incoming folder name matches the case of the folder name of the path.

After searching, some other solutions that may cause hot updates to fail are listed on the Internet:

1. Add the runtimeCompiler:true attribute, which refers to the Vue build that contains the runtime compiler.

two。 Execution

Npm run build-watch (it feels like it's useless, after all, it's a packing command)

Thank you for your reading, the above is the content of "how to solve the vue-cli3+webpack hot update failure". After the study of this article, I believe you have a deeper understanding of how to solve the problem of vue-cli3+webpack hot update failure, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.