搜尋

首頁  >  問答  >  主體

javascript - vue 使用cdn問題請教

請教一下，

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'

像是這種公共的js文件， 怎麼用cdn引用進來呢。目前是npm install 安裝的， 都在本地， 出口有限，很多包都是可以用cdn引入的。但目前都是vue框架操作的，沒有直接從html引進的寫好的地方。請問像https://cdn.bootcss.com/eleme... 這種公共cdn要怎麼使用到專案中呢。

学习ing学习ing2700 天前1246

全部回覆(5)我來回復

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

    回覆
    0
  • 女神的闺蜜爱上我

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

    就直接在 html 裡 從 CDN 引入，沒必要 引進來一起打包/壓縮了

    回覆
    0
  • 大家讲道理

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

    第三方的函式庫有cdn位址的，那就可以直接html中引入了，在template的html中。
    然後你也可以把程式碼丟到你自己的cdn上，統一管理，跟你的其他靜態檔案同樣的處理方式，例如你的img檔案都放到cdnUrl+projectName/img/ 這些第三方函式庫也丟上去。
    你現在本地是npm套件管理的，那你引用的時候如果是import進來的，一定會被webpack打包的... 這就涉及到webpack的問題了。還是先看看能不能解決現在的問題吧

    回覆
    0
  • 高洛峰

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

    可以看一下webpack的文檔，文檔上面有寫，還蠻詳細的，以jQuery為例

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

    回覆
    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自動添加資源路徑還是手動添加就是個人選擇了，所以重點是第一步

    回覆
    0
  • 取消回覆