Was tun, wenn sich die Logik nach dem Packen von Vue ändert?

Vue.js ist ein beliebtes Front-End-Framework, das uns hilft, Code beim Erstellen von Webanwendungen effizienter zu schreiben. Vue.js verfügt über eine gute Wartbarkeit und Skalierbarkeit. In einer Produktionsumgebung treten jedoch nach dem Packen von Vue.js logische Änderungen auf, was uns große Probleme bereitet. In diesem Artikel werden wir dieses Problem ausführlich besprechen und einige Lösungen anbieten.

Warum ändert sich die Logik, nachdem Vue.js gepackt wurde?

Während der Entwicklungsphase können wir problemlos Anwendungscode mit Vue.js schreiben. In einer Produktionsumgebung müssen wir den Code jedoch verpacken und an den Client senden. Durch diesen Prozess wird der Vue.js-Code komprimiert und verschleiert, um die Dateigröße zu reduzieren und die Leistung und Sicherheit zu verbessern.

Während des Verpackungsprozesses können jedoch einige Probleme auftreten. Einige Vue.js-Komponenten und Plug-Ins weisen nach dem Packen logische Änderungen auf. Dies liegt daran, dass der Compiler beim Packen die Komponenten- und Plug-in-Dateien von Vue.js in einer Datei zusammenführt und diese optimiert. Dies kann dazu führen, dass einige Funktionen von Vue.js nicht ordnungsgemäß funktionieren, wie z. B. dynamisches Routing, dynamische Komponenten, Event-On und benutzerdefinierte Anweisungen.

Wie kann man die logischen Änderungen nach der Verpackung von Vue.js lösen?

1. Verwenden Sie Bezeichner, um das Problem von Komponentennamenänderungen zu lösen.

Nach dem Packen können die Module nicht aufeinander verweisen. Es wird empfohlen, die Option „resolve.alias“ von webpack in webpack.config zu verwenden .js oder vue.config Konfiguration in .js hinzufügen:

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

Dies ist eine Standardlösung. Setzen Sie den $options.name der Komponente auf den Dateinamen der Komponente, um das Problem der Änderung des Komponentennamens zu lösen.

2. Verwenden Sie das ProvidePlugin des Webpacks, um die erforderlichen Module zu globalisieren.

Manchmal müssen wir das ProvidePlugin des Webpacks verwenden, um die Module zu globalisieren . Fügen Sie die folgende Konfiguration zu webpack.config.js hinzu:

const webpack = require("webpack")

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

3. Verwenden Sie vue.config.js für die Konfiguration

Fügen Sie die folgende Konfiguration zu vue.config.js hinzu:

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'
        },
    }
}

Dies ist eine typische Vue.js-Konfigurationsdatei. Lösen Sie das Dateipfadproblem, indem Sie „resolve.alias“ konfigurieren.

4. Verhindern Sie die wiederholte Kompilierung von Komponenten

Wenn in Vue.js eine Komponente von mehreren übergeordneten Komponenten referenziert wird, erstellt jede übergeordnete Komponente eine separate Instanz und kompiliert die Vorlage der Komponente unabhängig. Dies führt dazu, dass dieselben Komponenten wiederholt kompiliert werden und die Leistung nach langen Läufen beeinträchtigt wird. Durch die Verwendung der Option „cacheDirectory“ von vue-loader werden Komponenten zwischengespeichert, um mehrere Kompilierungen zu vermeiden und die Leistung zu verbessern.

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

Zusammenfassung

Während des Entwicklungsprozesses von Vue.js müssen wir auf die Frage der Handhabung logischer Änderungen in der Produktionsumgebung achten. Durch die Webpack-Konfiguration können wir die meisten Probleme lösen. Während des Entwicklungsprozesses sollten wir jedoch so oft wie möglich die neueste Version von Vue.js verwenden und den Code vor dem Packen sorgfältig testen, um unnötige Probleme zu vermeiden.

Das obige ist der detaillierte Inhalt vonWas tun, wenn sich die Logik nach dem Packen von Vue ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!