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='http://m.cgvv.com.cn/static/normalize.css'> <link rel='stylesheet' type='text/css' href='http://m.cgvv.com.cn/static/cssreset.css'> <link rel='stylesheet' type='text/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 - webpack 報錯 新人 求解2. nginx 80端口反向代理多個域名，怎樣隱藏端口的？3. android - NavigationView 的側滑菜單中如何保存新增項（通過程序添加）4. node.js - 跑antd的的模板例子！想修改端口，怎么修改呢！！(里面好像用了什么dora插件！！！)5. angular.js - angular做點擊購買時的遮罩層6. angular.js - 關于ng-model和ng-bind的疑問7. 有大佬知道這種接口文件怎么使用嗎？8. 關于thinkphp 5.1中，ajax提交數據url的格式寫法，加花括號就出錯，請老師指點9. tp5 不同控制器中的變量調用問題10. AirPods Pro 2連接Pixel 7出問題：播放90秒自動斷連
網公網安備