简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Demandez des conseils sur l'utilisation de CDN avec Vue
学习ing
学习ing 2017-07-05 10:36:18
0
5
1209

S'il vous plaît, donnez-moi quelques conseils,

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'

Comment utiliser cdn pour référencer des fichiers js publics comme celui-ci. Actuellement, il est installé par npm install, tous sont locaux et les exportations sont limitées. De nombreux packages peuvent être importés à l'aide de cdn. Mais actuellement, ils sont tous exploités par le framework Vue, et il n'y a pas de lieu d'écriture directement importé depuis HTML. Veuillez me dire comment utiliser un CDN public comme https://cdn.bootcss.com/eleme... dans le projet.

学习ing
学习ing

répondre à tous(5)
ringa_lee
ringa_lee2017-07-05 10:38:18 5 plancher 
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 est configuré comme ceci, le HTML introduit le jquery de 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>
Comme +0
Ajouter une réponse
女神的闺蜜爱上我
女神的闺蜜爱上我2017-07-05 10:38:18 4 plancher

Importez-le simplement directement dans html 里中 从 CDN, il n'est pas nécessaire de l'importer et de le conditionner/compresser ensemble

Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-07-05 10:38:18 3 plancher

Si la bibliothèque tierce possède une adresse CDN, celle-ci peut être directement introduite dans le HTML, dans le HTML du template.
Ensuite, vous pouvez également envoyer le code sur votre propre cdn, le gérer de manière uniforme et le traiter de la même manière que vos autres fichiers statiques. Par exemple, vos fichiers img sont placés dans cdnUrl+projectName/img/, et ces tiers. les bibliothèques du parti y sont également lancées.
Vous êtes actuellement géré par le package npm localement, donc si vous l'importez lorsque vous le citez, il sera certainement packager par webpack... Cela implique la question du webpack. Voyons si nous pouvons d’abord résoudre le problème actuel

Comme +0
Ajouter une réponse
小葫芦
小葫芦2017-07-05 10:38:18 2 plancher

Vous pouvez consulter la documentation du webpack. Elle est écrite dans la documentation, qui est assez détaillée. Prenez jQuery comme exemple

.

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

Comme +0
Ajouter une réponse
淡淡烟草味
淡淡烟草味2017-07-05 10:38:18 1 plancher

La résolution de votre problème nécessite les étapes suivantes
1. Extrayez les fichiers js installés localement par npm et introduits via l'importation. Cette partie peut être extraite via le plug-in CommonsChunkPlugin.

Par exemple : 

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. Utilisez HtmlWebpackPlugin pour résoudre le problème du chemin et du nom de fichier après l'empaquetage 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'
}
L'effet final généré est comme ça

// 生产环境
// 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>
Votre problème réside principalement dans l'extraction des fichiers js publics ci-dessus. Après l'extraction, c'est un choix personnel d'utiliser HtmlWebpackPlugin pour ajouter automatiquement des chemins de ressources ou de les ajouter manuellement, l'accent est donc mis sur la première étape

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！