搜索

首页  >  问答  >  正文

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学习ing2742 天前1278

全部回复(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
  • 取消回复