简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Soal Jawab  >  teks badan

javascript - Minta nasihat tentang menggunakan cdn dengan vue

Tolong beri saya nasihat,

import babelpolyfill from 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//import './assets/theme/theme-green/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
import routes from './routes'
//import Mock from './mock'
//Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'

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. Sila beritahu saya cara menggunakan CDN awam seperti https://cdn.bootcss.com/eleme... dalam projek.

学习ing学习ing2665 hari yang lalu1212

membalas semua(5)saya akan balas

  • ringa_lee

    ringa_lee2017-07-05 10:38:18

    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

    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>lawyer_fe</title>
  <link rel="stylesheet" type="text/css" href="/static/normalize.css">
  <link rel="stylesheet" type="text/css" href="/static/cssreset.css">
  <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>

    balas
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-07-05 10:38:18

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

    balas
    0
  • 大家讲道理

    大家讲道理2017-07-05 10:38:18

    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

    balas
    0
  • 高洛峰

    高洛峰2017-07-05 10:38:18

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

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

    balas
    0
  • 淡淡烟草味

    淡淡烟草味2017-07-05 10:38:18

    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
<script src="https://cdn.bootcss.com/element-ui/js/460de4b8.vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/js/e7d20340.a.min.js"></script>

    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

    .

    balas
    0
  • Batalbalas