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://www.piao2010.com/static/normalize.css'> <link rel='stylesheet' type='text/css' href='http://www.piao2010.com/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上，統(tǒng)一管理，跟你的其他靜態(tài)文件同樣的處理方式，比如你的img文件都放到cdnUrl+projectName/img/ 這些第三方庫也扔上去。你現(xiàn)在本地是npm包管理的，那你引用的時候如果是import進來的，肯定會被webpack打包的... 這就涉及到webpack的問題了。還是先看看能不能解決現(xiàn)在的問題吧
回答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’}
最終生成效果是這樣
// 生產(chǎn)環(huán)境// 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自動添加資源路徑還是手動添加就是個人選擇了，所以重點是第一步
相關(guān)文章：
1. sql語句 - 如何在mysql中批量添加用戶？2. shell - Update query wrong in MySQL3. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢，查詢結(jié)果有多條，如圖。4. javascript - mysql插入數(shù)據(jù)時怎樣避免與庫中的數(shù)據(jù)重復？5. php - 數(shù)據(jù)庫表如果是null怎么替換為其他字段的值6. 事務 - mysql共享鎖lock in share mode的實際使用場景7. SQLAlchemy 訪問Mysql數(shù)據(jù)庫彈出Warning,VARIABLE_VALUE，如何解決？8. mysql - JAVA怎么實現(xiàn)一個DAO同時實現(xiàn)查詢兩個實體類的結(jié)果集9. mysql - 數(shù)據(jù)庫建字段，默認值空和empty string有什么區(qū)別 11010. mysql建表報錯，查手冊看不懂，求解？
網(wǎng)公網(wǎng)安備