Vue CLI3 Import CDN

简介: Vue CLI3 Import CDN

首先查看 package.json 文件中js对应的版本,如下面的文件中 vue 版本为 2.5.21

  "dependencies": {
    "vue": "^2.5.21",
...

找一个 vue.js cdn 地址,这里使用 BootCDN 服务器,找到对应的 vue@2.5.21 版本的文件, 将整个 script 标签复制添加 index.html 的 body 中

...
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
</body>
...

前端项目根目录的 vue.config.js 配置文件中设置 externals 属性即可

module.exports = {
  outputDir: process.env.outputDir,
  configureWebpack: {
    externals: {
      vue: 'Vue'
    }
  }
}

这个时候项目页面就可以看到 vuejs 的加载源了

image.png

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
6月前
|
JavaScript
Vue CLI3 config
Vue CLI3 config
53 0
|
2月前
|
JavaScript 前端开发 Java
vue-day01 使用cdn引入使用
文章介绍了Vue.js的基础用法,包括数据绑定、条件渲染、列表渲染、事件处理等。通过示例代码展示了如何使用Mustache语法、v-once指令、v-html指令、v-bind和v-on指令,以及动态参数、修饰符和指令缩写。这些基础知识为初学者提供了Vue.js的使用入门。
vue-day01 使用cdn引入使用
|
2月前
|
JSON JavaScript 数据格式
vue写入json数据到文本中+vue引入cdn的用法
vue写入json数据到文本中+vue引入cdn的用法
53 10
|
21天前
|
存储 JavaScript 安全
vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速
vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速
38 0
|
3月前
|
JavaScript C++
以 Vue 3 项目为例,你是否经常遇到 import 语句顺序混乱的问题?要想解决它其实很容易!
以 Vue 3 项目为例,你是否经常遇到 import 语句顺序混乱的问题?要想解决它其实很容易!
|
12月前
|
JavaScript
vue运行报错:SyntaxError: Cannot use import statement outside a module
vue运行报错:SyntaxError: Cannot use import statement outside a module
187 0
|
JavaScript 前端开发 CDN
vue项目中使用CDN引入
vue项目中使用CDN引入
1831 1
|
缓存 JavaScript
Vue学习之Vue的计算属性与Vue内容分发
vue计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性有 计算 的能力(计算是动词),这里的 计算 就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已
84 0
|
JavaScript API CDN
通过CDN使用Vue
通过CDN使用Vue
569 0
|
JavaScript
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘
194 0
Vue CLI3不兼容IE11打开空白报错SCRIPT1003: 缺少 ‘:‘