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.cgvv.com.cn/static/normalize.css'> <link rel='stylesheet' type='text/css' href='http://www.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上，統(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. 求大神支招，php怎么操作在一個html文件的<head>標記內(nèi)添加內(nèi)容？2. 安裝了“PHP工具箱”，但只能以“游客”身份登錄3. 老師們php,插入數(shù)據(jù)庫mysql，都是空的，要怎么解決4. 跨類調(diào)用后，找不到方法5. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實現(xiàn)存在即更新應(yīng)該使用哪個標簽?6. 致命錯誤: Class ’appfacadeTest’ not found7. 在應(yīng)用配置文件 app.php 中找不到’route_check_cache’配置項8. PHP類屬性聲明？9. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢，查詢結(jié)果有多條，如圖。10. phpstady在win10上運行
網(wǎng)公網(wǎng)安備