recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Demandez des conseils sur l'utilisation de CDN avec Vue

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学习ing2700 Il y a quelques jours1245

répondre à tous(5)je répondrai

  • 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 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>

    répondre
    0
  • 女神的闺蜜爱上我

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

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

    répondre
    0
  • 大家讲道理

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

    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

    répondre
    0
  • 高洛峰

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

    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...

    répondre
    0
  • 淡淡烟草味

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

    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

    répondre
    0
  • Annulerrépondre