What to do if the logic changes after vue is packaged

Vue.js is a popular front-end framework that can help us write code more efficiently when building web applications. Vue.js has good maintainability and scalability. However, in a production environment, logic changes will occur after Vue.js is packaged, which brings us a lot of trouble. In this article, we will discuss this issue in depth and provide some solutions.

Why does the logic change after Vue.js is packaged?

During the development phase, we can easily write application code for Vue.js. However, in a production environment, we need to package the code and send it to the client. Through this process, Vue.js code is compressed and obfuscated to reduce file size, improve performance and security.

However, during the packaging process, we may encounter some problems. Some Vue.js components and plug-ins will have logical changes after packaging. This is because when packaging, the compiler merges the component and plug-in files of Vue.js into one file and optimizes it. This may cause some features of Vue.js to not work properly, such as dynamic routing, dynamic components, event on, and custom directives.

How to solve the logical changes after Vue.js packaging?

1. Use identifiers to solve the problem of changing component names

After packaging, because the component name is changed, the modules cannot reference each other. It is recommended to use the resolve.alias option of webpack. In webpack Add configuration in .config.js or vue.config.js:

module.exports = {
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  }
}

This is a standard solution. Set the $options.name of the component to the file name of the component to solve the change of the component name. question.

2. Use webpack's ProvidePlugin to globalize the required modules

Sometimes we need to call some modules globally. At this time, we need to use webpack's ProvidePlugin to globalize the modules, so that These modules can be used directly in any module. Add the following configuration in webpack.config.js:

const webpack = require("webpack")

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

3. Use vue.config.js for configuration

Add the following configuration in vue.config.js:

module.exports = {
    runtimeCompiler: true,
    configureWebpack: {    
        resolve: {
            alias: {
                '@components': resolve('src/components'),
                '@views': resolve('src/views'),
            }
        },
        externals:{
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'vuex': 'Vuex'
        },
    }
}

This is a typical Vue.js configuration file, which solves the file path problem by configuring resolve.alias.

4. Prevent repeated compilation of components

In Vue.js, when a component is referenced by multiple parent components, each parent component will create a separate instance and compile the component independently. template. This will cause the same components to be compiled repeatedly, and performance will be affected after long runs. By using the cacheDirectory option of vue-loader, components are cached to avoid multiple compilations and improve performance.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('cache-loader')
      .loader('cache-loader')
      .options({
        cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/vue-loader'),
      })
  }
}

Summary

During the development process of Vue.js, we need to pay attention to the issue of handling logical changes in the production environment. Through webpack configuration, we can solve most of the problems. However, during the development process, we should use the latest version of Vue.js as much as possible, and test the code carefully before packaging to avoid unnecessary trouble.

The above is the detailed content of What to do if the logic changes after vue is packaged. For more information, please follow other related articles on the PHP Chinese website!