The pits stepped on from the zero-configuration Vue development webpack environment

The general basic configuration is omitted. Assuming that webpack-dev-server has been configured, the rest is some errors when configuring Vue-related content.

1. The picture is not displayed and the path is [object Module]

Phenomenon

After the Vue page is configured normally, the page can be displayed, but the picture is not displayed. Check the element, the src of the img tag is a bit abnormal.

<img data-v-47323bf2="" src="[object Module]" alt="">

You can see that the src field is not an address, but an object, so it cannot be displayed.

reason

Looking at the vue-loader documentation, you can see in the chapter dealing with resource paths that vue-loader will convert all resource URLs encountered into webpack module requests.
For example, the following template code snippet:

<img src="../image.png">

Will be compiled into:

createElement('img', {
  attrs: {
    src: require('../image.png') // 现在这是一个模块的请求了
  }
})

You can see that Vue generates CommonJS module syntax, that is, require('../image.png'); but file-loader uses ES module syntax by default, that is, import'../image.png'; the two are inconsistent. So when the picture is referenced, it becomes src="[object Module]".

solve

Need to use CommonJS syntax for file-loader or url-loader. It just happens that file-loader or url-loader has an esModule option that can be adjusted, just set it to false:

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: 'static/img/[name].[hash:7].[ext]',
            esModule: false
        }
}

It is worth mentioning that in the current webpack Chinese document, url-loader does not mention this field at all, only the relevant description is in the English document.

2. The page is blank, and runtime-only build related errors are reported

Phenomenon

The page reported the following error

[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the
templates into render functions, or use the compiler-included
build.

reason

Vue has two forms of code compiler (template) mode and runtime mode (runtime). The main field of the package.json of the vue module defaults to the runtime mode, which points to the "dist/vue.runtime.common.js" location.
Correspondingly, there are two ways to initialize:

// compiler
new Vue({
  el: '#app',
  router: router,
  store: store,
  template: '<App/>',
  components: { App }
})

//runtime
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

I was using the above one, so an error occurred.

solve

There is an alias configuration in the webpack configuration file

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

With this alias, the import Vue from'vue' line of code is parsed as import Vue from'vue/dist/vue.esm.js', which directly specifies the location of the file without using the default file location of the main field. So just add the above configuration to webpack.config.js.

3. Unknown custom element: \<router-view\> problem

Phenomenon

The page is not displayed, and the following error is reported.

vue.esm.js:628 [Vue warn]: Unknown custom element: <router-view> -
did you register the component correctly? For recursive 
components, make sure to provide the "name" option.

reason

Because in addition to directly importing vue.js and vue-router.js in the file header, it will detect the existence of the window.Vue object inside vue-router, if it exists, it will automatically call the Vue.use() method, otherwise it needs to be called manually Vue.use(VueRouter) to ensure that the routing plugin is registered in Vue.

solve

Call Vue.use(Router) in main.js or other suitable places.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)