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要怎么使用到项目中呢。

回答:

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>

回答:

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

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

回答:

解决你的问题需要以下几个步骤
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自动添加资源路径还是手动添加就是个人选择了,所以重点是第一步

回答:

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

回答:

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

回答:

vue 使用cdn 导致 无法路由 懒加载 怎么破?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注