javascript - Minta nasihat tentang menggunakan cdn dengan vue

Question

Tolong beritahu saya, {code...} Cara menggunakan cdn untuk merujuk fail js awam seperti ini. Pada masa ini, ia dipasang oleh pemasangan npm, semuanya adalah tempatan, dan eksport adalah terhad. Banyak pakej boleh diimport menggunakan cdn. Tetapi pada masa ini mereka semua dikendalikan oleh rangka kerja Vue, dan tiada tempat penulisan yang diimport terus daripada HTML. ...

ringa_lee · Answer

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  externals: {
      jquery: 'jQuery.noConflict()', //或者jquery:'jQuery',
      $: 'jQuery.noConflict()'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
    }

Webpack dikonfigurasikan seperti ini, html memperkenalkan jquery cdn


  
  
  
  lawyer_fe

女神的闺蜜爱上我 · Answer

Hanya import terus masuk html 里中从 CDN, tak perlu import dan bungkus/mampatkan bersama

大家讲道理 · Answer

Jika perpustakaan pihak ketiga mempunyai alamat CDN, ia boleh dimasukkan terus ke dalam HTML, dalam HTML templat.
Kemudian anda juga boleh membuang kod ke cdn anda sendiri, mengurusnya secara seragam, dan memprosesnya dengan cara yang sama seperti fail statik anda yang lain Sebagai contoh, fail img anda diletakkan dalam cdnUrl+projectName/img/, dan ketiga- ini. perpustakaan parti juga dilemparkan ke atasnya.
Anda kini diuruskan oleh pakej npm secara tempatan, jadi jika anda mengimportnya semasa anda memetiknya, ia pasti akan dibungkus oleh webpack... Ini melibatkan isu webpack. Mari lihat sama ada kita boleh menyelesaikan masalah semasa dahulu

高洛峰 · Answer

Anda boleh melihat dokumentasi webpack Ia ditulis dalam dokumentasi, yang agak terperinci Ambil jQuery sebagai contoh

https://doc.webpack-china.org...

淡淡烟草味 · Answer

Menyelesaikan masalah anda memerlukan langkah berikut
1 Ekstrak fail js yang dipasang secara tempatan oleh npm dan diperkenalkan melalui import Bahagian ini boleh diekstrak melalui pemalam CommonsChunkPlugin Rujuk pemisahan kod webpack

Contohnya:

entry: {
    main:['./src/index.js'],
    vue:['vue'],
    jquery:['jquery']    
  }
...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
          name: ['vue','jquery'], // 指定公共 bundle 的名字。
          minChunks: function(module){
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
      })
]

2. Gunakan HtmlWebpackPlugin untuk menyelesaikan masalah laluan dan nama fail selepas pembungkusan js

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',//模板路径
            inject: true,
            hash:true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
           }
       })
   ]

以上资源路径配置在output项

// webpack.config.js
output: {
    ...
    publicPath: debug ? 'build/' : 'https://cdn.bootcss.com/element-ui'
}

Kesan akhir yang dihasilkan adalah seperti ini

// 生产环境
// a.html

Masalah anda terutamanya terletak pada pengekstrakan fail js awam di atas Selepas pengekstrakan, ia adalah pilihan peribadi sama ada untuk menggunakan HtmlWebpackPlugin untuk menambah laluan sumber secara automatik atau menambahnya secara manual, jadi tumpuan adalah pada langkah pertama

.

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket