精华内容
下载资源
问答
  • vue项目引入cdn资源及配置

    万次阅读 2019-08-11 17:36:11
    1.首先在index.html加入cdn资源 ...script src="//cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script> &l...

    1.首先在index.html加入cdn资源
    在这里插入图片描述

     	<script src="//cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
        <script src="//cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
        <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
        <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    

    2.打开在bulid文件夹下的webpack.base.conf.js,加上配置(注意,变量名和之前import的名字对应)
    在这里插入图片描述

    externals: {
        'vue':'Vue',
        'axios':'axios',
        'mint-ui': 'Mint',
        'vue-router':'VueRouter',
        'vue-i18n': 'VueI18n'
      },
    

    3.把mian.js的相关给代码注释掉,有些变量会有报错,可以把变量声明为全局变量,如:/* global Vue */
    在这里插入图片描述
    4.重启运行即可

    展开全文
  • Vue项目引入CDN后出现问题

    千次阅读 2020-04-05 15:31:56
    Vue项目发布后一般都会将本地的依赖包改为用CDN的形式引入,但是引入之后可能会出现各种问题,比如说我就遇到了Cannot read property 'catch' of undefined,这个catch应该是我在每个axios请求后面用以处理错误的...

    Vue项目发布后一般都会将本地的依赖包改为用CDN的形式引入,但是引入之后可能会出现各种问题,比如说我就遇到了Cannot read property 'catch' of undefined,这个catch应该是我在每个axios请求后面用以处理错误的捕获函数。在本地没有问题,为什么一用cdn就出现问题了呢?

    稍加分析后我觉得可能是引入的cdn引入的依赖和本地的版本不太一样。
    在vue项目文件夹(vue-cli3.x)下会有一个package.json,里面记录了项目用到的各种依赖以及版本信息,比如我的是这样的

    //运行依赖
    "dependencies": {
        "axios": "^0.19.1",
        "core-js": "^3.4.4",
        "echarts": "^4.7.0",
        "element-ui": "^2.4.5",
        "nprogress": "^0.2.0",
        "svgo": "^1.3.2",
        "vue": "^2.6.10",
        "vue-router": "^3.1.3"
      }
    

    所以我们只需要按照这个json对象修改我们对应引入cdn的版本就可以了

    	<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css">
        <!-- element-ui 的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css">
    
        <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.19.1/axios.min.js"></script>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
        <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
        <!-- element-ui 的 js 文件 -->
        <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    

    这样我的问题就解决了。

    还有就是发现使用package.json中ElementUI的版本以后一部分icon无法正确显示了,因此我就将ElementUI替换为了最高版本。目前暂未发现问题

    展开全文
  • vue项目引入cdn加速

    千次阅读 2019-11-06 12:47:56
    vue.config.js 示例 const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); const vueV = require('vue/package.json').version; const routerV = require('vue-router/package....

    vue.config.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" rel="external nofollow" >
      <title>index</title>
      <!-- 使用CDN的CSS文件 -->
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
       <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
       <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
      <% } %>
      <!-- 使用CDN的JS文件 -->
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
       <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
      <% } %>
     </head>
     <body>
      <noscript>
       <strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript>
      <div class="global-loading">
       <div class="spinner"></div>
      </div>
      <div id="app"></div>
      <!-- built files will be auto injected -->
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
       <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
      <% } %>
     </body>
    </html>
    
    // 本项目使用vue cli3 初始化项目
    const path = require('path');
    const TerserPlugin = require('terser-webpack-plugin');
    
    const vueV = require('vue/package.json').version;
    const routerV = require('vue-router/package.json').version;
    const vuexV = require('vuex/package.json').version;
    const axiosV = require('axios/package.json').version;
    const elementV = require('element-ui/package.json').version;
    const cookieV = require('js-cookie/package.json').version;
    const nprogressV = require('nprogress/package.json').version;
    const echartsV = require('echarts/package.json').version;
    
    const isProduction = process.env.NODE_ENV === 'production';
    const isCdn = true;  // 是否开启cdn模式
    
    const logTxt =
      process.env.NODE_ENV === 'development'
        ? '编译开发'
        : process.env.VUE_APP_FLAG === 'test'
          ? '打包测试'
          : '打包线上';
    
    console.log(logTxt);
    
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    // 忽略的包
    const Externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'js-cookie': 'Cookies',
      'nprogress': 'NProgress',
      'echarts': 'echarts',
      
    };
    // cdn
    const CDN = {
      css: [
        // `https://cdn.jsdelivr.net/npm/element-ui@${elementV}/lib/theme-chalk/index.min.css`,
        `https://cdn.bootcss.com/element-ui/${elementV}/theme-chalk/index.css`,
        `https://cdn.bootcss.com/nprogress/${nprogressV}/nprogress.min.css`,
    
      ],
      js: [
        // `https://cdn.jsdelivr.net/npm/vue@${vueV}/dist/vue.min.js`,
        // `https://cdn.jsdelivr.net/npm/vuex@${vuexV}/dist/vuex.min.js`,
        // `https://cdn.jsdelivr.net/npm/vue-router@${routerV}/dist/vue-router.min.js`,
        `https://cdn.bootcss.com/vue/${vueV}/vue.min.js`,
        `https://cdn.bootcss.com/vuex/${vuexV}/vuex.min.js`,
        `https://cdn.bootcss.com/vue-router/${routerV}/vue-router.min.js`,
        //  从jsdeliver 引入完整element-ui
        // `https://cdn.jsdelivr.net/npm/element-ui@/${elementV}/lib/index.min.js`,
        // 从bootcdn
        `https://cdn.bootcss.com/element-ui/${elementV}/index.js`,
        `https://cdn.bootcss.com/echarts/${echartsV}/echarts.min.js`,
        `https://cdn.bootcss.com/axios/${axiosV}/axios.min.js`,
        `https://cdn.bootcss.com/js-cookie/${cookieV}/js.cookie.min.js`,
        `https://cdn.bootcss.com/nprogress/${nprogressV}/nprogress.min.js`,
    
      ]
    };
    
    module.exports = {
      publicPath: '/', // 公共路径
      outputDir: process.env.VUE_APP_FLAG === 'test' ? 'test-dist' : 'dist', // 不同的环境打不同包名
      lintOnSave: false, // 关闭eslint
      productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
      parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
      // 这里写loader
      chainWebpack: (config) => {
        // production打包才使用CDN
        if (isProduction && isCdn) {
          config.plugin('html')
            .tap(args => {
              args[0].cdn = CDN;
              return args;
            })
        }
    
        // config.resolve.alias
        //   .set('assets', resolve('src/assets'))
        //   .set('pages', resolve('src/pages'))
        //   .set('components', resolve('src/components'))
        //   .set('utils', resolve('src/utils'))
      },
    
      // 这里回覆盖webpack默认配置
      configureWebpack: config => {
        // production模式
        if (isProduction && isCdn) {
          config.externals = Externals
          // 打包生产.gz包
          // config.plugins.push(new CompressionWebpackPlugin({
          //   algorithm: 'gzip',
          //   test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          //   threshold: 10240,
          //   minRatio: 0.8
          // }))
          // 添加自定义代码压缩配置
          config.plugins.push(
            new TerserPlugin({
              // 是否开启多线程
              parallel: true,
              terserOptions: {
                // 去除打印
                compress: {
                  warnings: false,
                  drop_console: true,
                  drop_debugger: true,
                  pure_funcs: ['console.log']
                },
                // 去除注释,当设置为true时,会保留注释
                // 当然这个默认是false
                output: {
                  comments: false,
                },
              },
            }),
    
          )
        }
      }
    };
    
    
    展开全文
  • Vue官网 渐进式:没有太多限制的框架,能与很多其他框架配。AngularJS有很多限制、规则。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue.js<...

    Vue官网

    渐进式:没有太多限制的框架,能与很多其他框架配。AngularJS有很多限制、规则。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Vue.js</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <!-- vue-app是根容器 -->
        <div id="vue-app">
            
        </div>
        <script src="app.js" type="text/javascript"></script>
    </body>
    </html>

     

     

     

     

    展开全文
  • <!-- nprogress 的样式表文件 -...link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <!-- 富文本编辑器 的样式表文件 --> <link rel="stylesheet" ...
  • vue里面使用cdn方式引入axios和qs

    千次阅读 2020-04-13 17:38:52
    axios使用post请求才会和qs一起使用
  • 初识 Vue 引入CDN

    2020-08-10 16:25:11
    Vue 引入CDN <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"> <h1>{{...
  • vue-cli cdn方式引入Vue模块

    万次阅读 2019-10-30 11:44:30
    文章目录选择Vuecdn从那儿引入?是否需要删除 import Vue 语句?打包测试 选择Vuecdn 引入vue 文件必须是游览器版本,最少需要包含 vue 的运行时源码,也就是 vue.runtime.min.js 这个文件,可以到各大cdn...
  • 这个不需要npm搭建脚手架安装Vue,只需要简单引入Vuecdn链接,即可实现,通过引入Axios进行渲染数据到html页面。index.htmlVue axios 渲染数据[v-cloak] {display: none;}Vue Cdn Axios 渲染数据{{ site.title }}{...
  • vue项目 + iview 引入cdn

    千次阅读 2019-10-16 18:46:49
    vue项目 + iview 引入cdn 背景 vue cli + webpack 项目,使用build后,vendor包过大,因此使用cdn将静态的资源放到cdn服务器上。 步骤 open build/webpack.base.conf.js 将下列代码添加到module.exports中 ...
  • vue里面引入引入fastclick Vue项目引入fastclick插件:解决移动端300毫秒点击延迟问题 把fastclick这个包安装到项目的依赖之中,–save表示开发与上线都需要 npm install fastclick --save // 或者(推荐) cnpm ...
  • vue/webpack 引入 cdn 资源

    千次阅读 2018-07-20 16:13:00
    使用 vue 的 webpack 模版开发 spa 项目时,我们习惯使用 npm install 安装各种组件和依赖到本地,但引入的...准确的说,vue/webpack 其实是一个 webpack 工程,怎么将 cdn 资源引入到项目中是对 webpack 进行相关配...
  • vue cdn 引入第三方依赖

    万次阅读 2020-04-11 14:58:16
    通过执行npm run preview – --...你可以使用 CDN 外链的方式引入这些第三方库,这样能大大增加构建的速度(通过 CDN 引入的资源不会经 webpack 打包)。如果你的项目没有自己的CDN服务的话,使用一些第三方的CDN...
  • vue里面引入引入fastclick

    千次阅读 2018-07-11 15:31:47
    引入fastclick库:解决移动端300毫秒点击延迟把fastclick这个包安装到项目的依赖之中,--save表示开发与上线都需要 npm install fastclick --save 如果写这个报错了,你再试试cnpm install fastclick --save 然后在...
  • 例:以cdn引入腾讯防水墙为例 前因:在html的head中引入外部cdn链接, 在vue文件中直接使用,如图 结果:如图报错 解决办法: 1. 在index.html中的head中引入, 2.在webpack.base.conf.js中配置 ...
  • vue项目CDN引入

    2021-05-26 15:00:47
    注:一些对系统并不是至关...注:需引入vue并且main.js中正常引入,但element-ui就无需引入,可以直接使用 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/ele
  • vue CDN引入的过程

    2020-06-04 12:05:32
    script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>``` 在包.json中删除 router 同理 build/webpack.base.conf.js 中定义声明 module.exports = { ... externals: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,626
精华内容 6,250
关键字:

vue里面引入cdn

vue 订阅