搜索到
1
篇与
的结果
-
vue-cli构建的项目 CDN引入框架文件的问题 vue-cli2.x中用法1、 index.html中引入相关的js<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>我是标题</title> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <noscript> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script src="/map/map_loader.js"></script> <!-- built files will be auto injected --> </body> </html>2、 修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理module.exports = { ... externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的作者定义的，是固定值，不同的库的这个值需要到相应的库的开发文档中获取，其实这个值最终就是绑定到window对象上的全局变量。 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' } ... }通过上面的配置后使用就还是跟以前一样使用就行了，vue-cli3.x 使用方法1、同上面的步骤1.2、在vue.config.js configureWebpack选项中通过externals选项加载外部扩展，引入依赖库，不需要webpack处理// ... module.exports = { // ... configureWebpack: { // webpack配置，值位对象时会合并配置，为方法时会改写配置 // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ], externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', // 'element-ui': 'ELEMENT' } }, // ... };在使用的过程中遇到了一个问题，就是通过cdn引入压缩的vue文件，启动项目后，google浏览器vue开发插件无法工作，也是纠结了很久才找到是这个原因导致的。把上面的vue的cdn地址改成//cdn.bootcss.com/vue/2.5.2/vue.js就行了。那么问题就来了，我不可能在生产环境使用未被压缩的库文件吧？上面的问题就引出了另一个问题。”怎么在vue的html文件里根据不同的环境加载不同的文件？“稍微注意点我们就会发现在vue-cli生成的项目，index.html里面有这样一句代码<link rel="icon" href="<%= BASE_URL %>favicon.ico">代码里面动态输出了一个变量，我猜测这个语法是ejs模板语法，所以我大胆地尝试了一下<% if(1 === 1) { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script> <% } else { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <% } %>发现能正常加载输出script标签并加载vue文件。这是因为vue-cli-service内部使用html-webpack-plugin处理的html文件，而html-webpack-plugin内部使用了ejs模板。来到node_modules 的 html-webpack-plugin，在index.js里就能看到他的逻辑了class HtmlWebpackPlugin { constructor (options) { // Default options this.options = _.extend({ template: path.join(__dirname, 'default_index.ejs'), templateParameters: templateParametersGenerator, filename: 'index.html', hash: false, inject: true, compile: true, favicon: false, minify: false, cache: true, showErrors: true, chunks: 'all', excludeChunks: [], chunksSortMode: 'auto', meta: {}, title: 'Webpack App', xhtml: false }, options); } }上面的代码肯定不陌生，就是我们在写插件或者库的时候接收对象类型参数时，用来做传入参数和默认值的合并用的。上面有个template参数，用来指定编译时的模板文件，根据他的默认值就能看出是用了ejs模板引擎了。default_index.ejs内容如下：// html-webpack-plugin/default_index.ejs <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>有了上面的理解，我们需要做的就是把1===1换成我们想要的逻辑就行了，就是获取环境变量来来判断是生产环境还是开发环境。既然是webpack处理的html文件，那么在上下文中就肯定能访问到webpack在运行时的node环境变量process.env最终index.html代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>我是标题</title> <% if(process.env.VUE_APP_NODE_ENV === 'development') { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script> <% } else { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <% } %> <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <noscript> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script src="/map/map_loader.js"></script> <!-- built files will be auto injected --> </body> </html>通过上面的调整，就能同时使用cdn引入库文件而不影响我们原来的调试了
