javascript - vue 使用cdn問(wèn)題請(qǐng)教
問(wèn)題描述
請(qǐng)教一下，
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引用進(jìn)來(lái)呢。 目前是npm install 安裝的， 都在本地， 出口有限，很多包都是可以用cdn引入的。 但是目前都是vue框架操作的，沒(méi)有直接從html引入的寫的地方。 請(qǐng)問(wèn)像https://cdn.bootcss.com/eleme... 這種公共cdn要怎么使用到項(xiàng)目中呢。
問(wèn)題解答
回答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.4tl426be.cn/static/normalize.css'> <link rel='stylesheet' type='text/css' href='http://www.4tl426be.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 引入，沒(méi)必要 引進(jìn)來(lái)起來(lái)一起打包/壓縮了
回答3：第三方的庫(kù)有cdn地址的，那就可以直接html中引入了，在template的html中。然后你也可以把代碼扔到你自己的cdn上，統(tǒng)一管理，跟你的其他靜態(tài)文件同樣的處理方式，比如你的img文件都放到cdnUrl+projectName/img/ 這些第三方庫(kù)也扔上去。你現(xiàn)在本地是npm包管理的，那你引用的時(shí)候如果是import進(jìn)來(lái)的，肯定會(huì)被webpack打包的... 這就涉及到webpack的問(wèn)題了。還是先看看能不能解決現(xiàn)在的問(wèn)題吧
回答4：可以看一下webpack的文檔，文檔上面有寫，還是挺詳細(xì)的，以jQuery為例子
https://doc.webpack-china.org...
回答5：解決你的問(wèn)題需要以下幾個(gè)步驟1、提取本地由npm安裝，通過(guò)import引入的js文件，這部分可以通過(guò)CommonsChunkPlugin插件進(jìn)行提取參考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打包之后的路徑和文件名問(wèn)題
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項(xiàng)
// 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>
你的問(wèn)題主要在于以上公共js文件的提取，至于提取出來(lái)后，采用HtmlWebpackPlugin自動(dòng)添加資源路徑還是手動(dòng)添加就是個(gè)人選擇了，所以重點(diǎn)是第一步
相關(guān)文章：
1. mysql - 在不允許改動(dòng)數(shù)據(jù)表的情況下，如何優(yōu)化以varchar格式存儲(chǔ)的時(shí)間的比較？2. javascript - Img.complete和img.onload判斷圖片加載完成有什么區(qū)別？3. docker網(wǎng)絡(luò)端口映射，沒(méi)有方便點(diǎn)的操作方法么？4. mysql 為什么主鍵 id 和 pid 都市索引, id > 10 走索引 time > 10 不走索引?5. css3 - 純css實(shí)現(xiàn)點(diǎn)擊特效6. java中返回一個(gè)對(duì)象，和輸出對(duì)像的值，意義在哪兒7. 安全性測(cè)試 - nodejs中如何防m(xù)ySQL注入8. javascript - 關(guān)于apply（）與call（）的問(wèn)題9. MySQL中無(wú)法修改字段名的疑問(wèn)10. python - 在sqlalchemy中獲取剛插入的數(shù)據(jù)id?
網(wǎng)公網(wǎng)安備