问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 使用cdn问题请教

头像
vanceee
    551821

    请教一下，

    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要怎么使用到项目中呢。

    vue.jsjavascript
    阅读 17.7k
    6 个回答
    得票最新
    头像
    ppyuex
      4241314
      ✓ 已被采纳
      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="/static/normalize.css">
  <link rel="stylesheet" type="text/css" href="/static/cssreset.css">
  <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>
      头像
      命理难说
        3.6k3912
        头像
        whilter
          123

          解决你的问题需要以下几个步骤
          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.js
output: {
    ...
    publicPath: debug ? 'build/' : 'https://cdn.bootcss.com/element-ui'
}

          最终生成效果是这样

          // 生产环境
// 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自动添加资源路径还是手动添加就是个人选择了，所以重点是第一步

          头像
          chekun
            3.4k2220

            就直接在 html 里中 从 CDN 引入，没必要 引进来起来一起打包/压缩了

            头像
            sunyongjian
              1.3k17

              第三方的库有cdn地址的，那就可以直接html中引入了，在template的html中。
              然后你也可以把代码扔到你自己的cdn上，统一管理，跟你的其他静态文件同样的处理方式，比如你的img文件都放到cdnUrl+projectName/img/ 这些第三方库也扔上去。
              你现在本地是npm包管理的，那你引用的时候如果是import进来的，肯定会被webpack打包的... 这就涉及到webpack的问题了。还是先看看能不能解决现在的问题吧

              头像
              suface
                3
                新手上路，请多包涵

                vue 使用cdn 导致 无法路由 懒加载 怎么破？

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏