suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript – Bitten Sie um Rat zur Verwendung von CDN mit Vue

Bitte geben Sie mir einen Rat,

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'

So verwenden Sie CDN, um auf öffentliche JS-Dateien wie diese zu verweisen. Derzeit wird es von npm install installiert, alle sind lokal und die Exporte sind begrenzt. Viele Pakete können mit cdn importiert werden. Derzeit werden sie jedoch alle vom Vue-Framework betrieben, und es gibt keinen direkt aus HTML importierten Schreibort. Bitte sagen Sie mir, wie ich ein öffentliches CDN wie https://cdn.bootcss.com/eleme... im Projekt verwenden kann.

学习ing学习ing2697 Tage vor1242

Antworte allen(5)Ich werde antworten

  • 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这样配置, html引入cdn的jquery

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

    Antwort
    0
  • 女神的闺蜜爱上我

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

    就直接在 html 里中 从 CDN 引入，没必要 引进来起来一起打包/压缩了

    Antwort
    0
  • 大家讲道理

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

    第三方的库有cdn地址的，那就可以直接html中引入了，在template的html中。
    然后你也可以把代码扔到你自己的cdn上，统一管理，跟你的其他静态文件同样的处理方式，比如你的img文件都放到cdnUrl+projectName/img/ 这些第三方库也扔上去。
    你现在本地是npm包管理的，那你引用的时候如果是import进来的，肯定会被webpack打包的... 这就涉及到webpack的问题了。还是先看看能不能解决现在的问题吧

    Antwort
    0
  • 高洛峰

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

    可以看一下webpack的文档，文档上面有写，还是挺详细的，以jQuery为例子

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

    Antwort
    0
  • 淡淡烟草味

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

    解决你的问题需要以下几个步骤
    1、提取本地由npm安装，通过import引入的js文件，这部分可以通过CommonsChunkPlugin插件进行提取参考webpack代码分离

    例如：

    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、利用HtmlWebpackPlugin解决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'
}

    最终生成效果是这样

    // 生产环境
// 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>

    你的问题主要在于以上公共js文件的提取，至于提取出来后，采用HtmlWebpackPlugin自动添加资源路径还是手动添加就是个人选择了，所以重点是第一步

    Antwort
    0
  • StornierenAntwort