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要怎么使用到项目中呢。
问题解答
回答1：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='https://www.haobala.com/static/normalize.css'> <link rel='stylesheet' type='text/css' href='https://www.haobala.com/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>回答2：
就直接在 html 里中 从 CDN 引入，没必要 引进来起来一起打包/压缩了
回答3：第三方的库有cdn地址的，那就可以直接html中引入了，在template的html中。然后你也可以把代码扔到你自己的cdn上，统一管理，跟你的其他静态文件同样的处理方式，比如你的img文件都放到cdnUrl+projectName/img/ 这些第三方库也扔上去。你现在本地是npm包管理的，那你引用的时候如果是import进来的，肯定会被webpack打包的... 这就涉及到webpack的问题了。还是先看看能不能解决现在的问题吧
回答4：可以看一下webpack的文档，文档上面有写，还是挺详细的，以jQuery为例子
https://doc.webpack-china.org...
回答5：解决你的问题需要以下几个步骤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.jsoutput: { ... 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自动添加资源路径还是手动添加就是个人选择了，所以重点是第一步
相关文章：
1. javascript - 读取页面源码，页面中所有的换行都被当成<br/>读取出来 了，，求解应该怎么让它被正确的解析2. css - 手机端chrome打开github和bilibili等少数网站会发现地址栏周围也会有背景色3. java - 3个dao的数据根据请求参数选择一个映射到一个url上，怎么写比较好?4. javascript - 静态页面引公共头尾文件，js怎么写吖？5. java - Spring使用@Autowired失效但是getBean()可以执行成功6. docker网络端口映射，没有方便点的操作方法么？7. docker 17.03 怎么配置 registry mirror ?8. javascript - 关于一段 for 循环代码执行顺序的问题9. 求解答：访问不了虚拟服务器的问题？10. html5 - 百度Ueditor代码高亮和代码段滚动条冲突是怎么回事?
网公网安备