精华内容
下载资源
问答
  • <div><p>我原意想通过 i18n 来自定义几个文字,就不需要修改源码了。 看了下源码,... dist 的 min 会比 src 更新?</p><p>该提问来源于开源项目:xCss/Valine</p></div>
  • 他们都的有什么区别? |-dist |-- vue.js |-- vue.common.js |-- vue.esm.js |-- vue.runtime.js |-- vue.runtime.common.js |-- vue.runtime.esm.js |-- vue.min.js |-- vue.runtime.min.j

    初看源码看到vue 源码中dist文件下有很多个版本的vue的时候,我们可能会一头雾水,为什么会有这么多版本?他们都是干啥的有什么区别?

    |-dist
        |-- vue.js
        |-- vue.common.js
        |-- vue.esm.js
        |-- vue.runtime.js
        |-- vue.runtime.common.js
        |-- vue.runtime.esm.js
        |-- vue.min.js
        |-- vue.runtime.min.js
    

    我们仔细观察会发现,其实也就几大类,一种压缩过的,一种未压缩的,common版的,esm版的,runtime版的,官方对这些类型解释如下

    UMD CommonJS ES Module
    Full(完整版) vue.js vue.common.js vue.esm.js
    Runtime-only(运行版) vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
    Full (production) vue.min.js
    Runtime-only (production) vue.runtime.min.js

    带.min的这个不用多说大家都知道,这个是压缩版本,那 umdcommonjsEM module分别是啥?
    做过插件的同学对这个比较熟悉,这三种分别是前端模块化的三种模式,

    • umd是用过模块规范是我们最熟悉的方式,通过script标签引入插件,插件一般通过全局变量的形式引入,挂载到window上。
    • commonJS 是nodejs 采用的最早的模块标准,通过module.exports导出,require("moduleName")导入,
    • EM Module ES6推出的模块化标准,通过 export语法导出 import xxx from 'module' 导入

    具体可看上一篇文章 前端模块化( CommonJS、AMD、CMD、UMD、ES Module) 详解

    那么就剩最后一个runtime了?官方介绍runtime版本是运行时版本,不包含vue的模板编译器,因为现在大部分vue开发都使用vue 全家桶,而解析模板的任务就交给 vue-loader 在项目build的时候就解析成了render函数的形式,所以不需要编译器。vue pageage.json 中默认导出的就是vue.runtime.common.js 版本。

    我们书写vue 模板无非有三种方式:

    第一种前端vue工程中,使用vue-loader解析模板,所以引入runtime版就可以了

    //xxx.vue文件内
    <templte> 
        <input v-model="value">
    </template>
    <script>
    <script>
    export default {
      name: 'app',
      data(){
          return {value:1}
      }
    }
    </script>
    

    第二种,利用script标签申明模板内容, 常用于cdn引入模式,这种模式由于需要解析模板,所以需要引入完整版的vue,如果引入的是不是完整版页面会报错"runtime-only版本的没有compiler解析器"

    //xxx.html
    <script type="text/x-template" id="my-template">
      <input v-model="value">
    </script>
    Vue.component('my-component',{
        template:"#my-template"
    })
    
    

    第三种,render函数,由于书写不太优化这种我们平时使用很少,多用于地层组件优化,在vue中前两种模板最终都会解析成render函数的形式执行,不需要解析模板,所以runtime版本就可以了

    Vue.component('my-component', {
        props: ['value'],
        //javascript 函数式模板
        render: function (createElement) {
          var self = this
          return createElement('input', {
            domProps: {
              value: self.value
            },
            on: {
              input: function (event) {
                self.$emit('input', event.target.value)
              }
            }
          })
        }
    })
    

    通过修改vue-cli 或者 webpack的配置我们可以指定引入哪个版本的vue,
    vue.confing.js 中设置 runtimeCompiler改用完整版,webpack中配置参数

    module.exports={
        //省略...
        resolve:{
            alias:{
                'vue':'vue/dist/vue.js'
            }
        }
        ...
    }
    

    然后再页面正常引入就可以了

    import vue from 'vue'
    
    展开全文
  • <div><p>win7系统当我执行npm run build的时候生成的dist目录下生成的目录${npm_package_family},${npm_package_name},没有自动读取package.json下的配置,这?是不是环境配置不对?下面的文件生成的&...
  • <div><p>用项目里面的nginx配置还是加载不了数据,一直提示404,有办法排除吗,打包用npm install npm run build 生成的dist静态文件,</p><p>该提问来源于开源项目:apache/skywalking-rocketbot-ui</p></...
  • 第一次看到这两个文件的时候不知道这是啥,为了知其所以然,于是乎查了一下,在这里稍作整理。 无论是做项目还是开发自己的组件库,发布之前的最后一步就是打包部署了,之前部署项目时打包文件都是会把 ...

    1、打包后不仅有 min.js

    Vue 使用 lib 模式 开发自己的组件库时,打包后的 dist 目录不仅有 lib.min.js,还会出现 lib.common.js lib.umd.js。第一次看到这两个文件的时候不知道这是啥,为了知其所以然,于是乎查了一下,在这里稍作整理。

    无论是做项目还是开发自己的组件库,发布之前的最后一步就是打包部署了,之前部署项目时打包文件都是会把 html/css/js 等文件做一些压缩处理,再加一些打包工具的代码,比如 webpack 的运行时环境等。那这个 common/umd 是什么?

    ps:这里有 Vue CLI 官网指定的应用模式和库模式的打包方式,感兴趣的同学可以 移步这里

    2、CommonJS/Amd/Umd 简介

    以史为镜,可以知兴替。在聊这两个文件内之前需要先了解一些 JS 模块化的东西。

    其实 JavaScript 在发展之初是一直没有模块(module)体系的,无法将一个大的程序拆分成相互依赖的小文件,在用简单的方法将它们拼装起来。其他语言都有这项功能,比如 Ruby 的 require、Python 的 import,甚至连 CSS 都有 @import,但是 JavaScript 却没有任何这方面的支持,这对于开发大型、复杂的项目而言无疑是一个巨大的障碍。

    下面我们来看看 JavaScript 在应对起初的没有模块化这一问题,在发展历程中都经历的哪些阶段?

    • <script> 标签:在 JS 发展的襁褓里没有模块化,即使复杂的功能代码也是放在一起的一大坨,为了解决这个问题,当时普遍都是使用一个立即执行函数,通过立即执行函数将 js 代码包裹到一个单独的文件中,然后通过 <script> 标签对其进行引入,这样就能使得各自文件的 js 代码在一个局部的作用域中执行,避免了相互影响。
    • Common.js :但在后来伴随 node.js 的出现,就出现了一个 js 文件之间的相互依赖问题,总不能每次都写 <script> 标签吧。于是乎当时就有了 Common.js 模块依赖的语法,引入时使用 var fs = require('fs'),导出用 module.export a = 1;。
    • AMD(异步模块定义) :Common.js 的问题在于它是同步执行的,很显然浏览器不会希望一开始就下载,于是乎就出现了一种 AMD 的语法:require.js,它是专门为浏览器发明的。它的具体用法是通过 回调 :require('vue',(Vue) => {new Vue()}) 拿到 异步 得到的模块。
    • import/export:上述两种引入方式相互并存了一段时间后,制定 JavaScript 规范的委员会出面,发布了标准的 js 模块化的import/export 语法,通过 import 导入 js 模块,通过 export 导出模块,这也是现如今使用比较流行的语法。
    • UMD(统一模块定义):这种模块语法会自动监测开发人员使用的是 Common.js/AMD/import/export 种的哪种方式,然后再针对各自的语法进行导出,这种方式可以兼容所有其他的模块定义方法。

    了解了以上简介,就知道了为什么 Vue 的 lib 模式会打包出 umd 文件了,为的就是能兼容多种模块定义方式。

    3、CommonJS 和 AMD 与 ES6 的区别

    在 ES6 之前,社区指定的上述这些模块加载方案,其中最主要的还是 CommonJS 和 AMD 两种,前者用于服务器,后者用于浏览器。ES6 在语言规格的层面上实现了模块功能,而且实现得相当简单,完全可以取代现有的 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

    ES6 模块设计思想是尽量 静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块都是只能在运行时确定这些东西。

    比如 CommonJS 模块就是对象,输入时必须查找对象属性。

    //CommonJS 模块
    let {stat, exists, readFile} = require('fs');
    
    //相当于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readFile = _fs.readFile;

    上述代码的实质是整体加载 fs 模块(即加载 fs 的所有方法),生成一个对象(_fs),然后再从这个对象上读取 3 个方法。这种加载称为 "运行时加载",因为只有运行时才能得到这个对象,导致完全没有办法在编译时进行 "静态优化"。

    而 ES6 模块不是对象,它是通过 export 命令显式指定输出的代码,再同构 import 命令输入。

    //ES6 模块
    import {stat, exists, readFile} from 'fs';

    上述代码的实质是从 fs 模块加载 3 个方法,而不加载其他方法。这种加载称为 "编译时加载" 或者静态加载,即 ES6 可以在编译时就完成模块加载,效率比 CommonJS 的加载方式高。当然,这也导致 ES6 模块本身无法被引用,因为它不是对象。

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的方法_侠课岛(9xkd.com)<...script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axio.
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的方法_侠课岛(9xkd.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="watch-example">
            <p>
              Ask a yes/no question:
              <input v-model="question" />
            </p>
            <p>{{ answer }}</p>
          </div>
     
    
    <script>
      const watchExampleVM = Vue.createApp({
        data() {
          return {
            question: '',
            answer: 'Questions usually contain a question mark. ;-)'
          }
        },
        watch: {
          // whenever question changes, this function will run
          question(newQuestion, oldQuestion) {
            if (newQuestion.indexOf('?') > -1) {
              this.getAnswer()
            }
          }
        },
        methods: {
          getAnswer() {
            this.answer = 'Thinking...'
            axios
              .get('https://yesno.wtf/api')
              .then(response => {
                this.answer = response.data.answer
              })
              .catch(error => {
                this.answer = 'Error! Could not reach the API. ' + error
              })
          }
        }
      }).mount('#watch-example')
    </script>
    
    
        <style>
            .demo {
      font-family: sans-serif;
      border: 1px solid #eee;
      border-radius: 2px;
      padding: 20px 30px;
      margin-top: 1em;
      margin-bottom: 40px;
      user-select: none;
      overflow-x: auto;
    }
        </style>
    </body>
    </html>
    
    展开全文
  • Couldn't parse bundle asset "F:\Work_zxz\vue\hzgh_vue\dist\js\chunk-vendors.js". Analyzer will use module sizes from stats file. warning in ./src/App.vue?vue&type=template&id=7ba5bd90 ...
  • 首先本地运行无误,为打包就不行呢? 打包使用 生产模式: publicPath: process.env.NODE_ENV === 'production' ? './' : '/', 如果你的路由模式使用的history模式,则不能使用上面的相对路径 ./ 只能使用 绝对...

    首先本地运行无误,为啥打包就不行呢?

    打包使用 生产模式:

      publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    

    如果你的路由模式使用的是history模式,则不能使用上面的相对路径 ./ 只能使用 绝对路径 / /test之类的
    具体差异参见
    负责会报 以下错误

    Uncaught SyntaxError: Unexpected token <
    

    同时 如果nginx 404 ,你需要加上以下配置。

    server {
      listen       8887;
    
      location / {
        rewrite / /vue ;
      }
    
      location /vue {
        proxy_pass http://localhost:8888/dist;
        proxy_set_header Host $host:$server_port;
      }
    }
    
    server {
      listen       8888;
      server_name  localhost;
    
      location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /dist/index.html;
      # 这句配置的意思就是,拿到一个地址,先根据地址尝试找对应文件,
      # 找不到再试探地址对应的文件夹,再找不到就返回/test/index.html。
      # 再次打开刚才的about地址,刷新页面也不会404啦:
      }
    }
    
    

    详细参见官方文档
    HTML5 History 模式

    展开全文
  • Node.js入门笔记

    万次阅读 2014-06-09 18:10:17
    1、安装nodejs,下载Windows下的安装版本,注意以msi为扩展名的,然后下一步,没好说的,下载地址如下: 32位的msi:http://nodejs.org/dist/latest/ 64位的msi:http://nodejs.org/dist/latest/ 2、安装...
  • vue项目nginx部署

    2021-05-17 20:23:52
    vue项目nginx部署1、执行npm run ...npm run build ##这里主要看你webpack里面配置的命令是啥,默认是npm run build 2、把dist目录拷贝到nginx的html目录下面 3、配置nginx.conf文件 主要配置下server里面的几个配置
  • nginx的使用

    2019-11-07 21:18:26
    大白话说吧,nginx代理服务器,为啥是代理呢,因为它只是个中介,其作用将前端的请求转发到对应的后台服务上(请求转发到真正的服务器上)。 还有一点需要理解的,前端打包后的dist只是一些静态文件,没办法...
  • 前端的image制作流程其实跟后端的也没区别,首先通过build生成静态文件,也就是dist文件夹中的文件,然后通过放到nginx的image中,配置nginx的配置文件,进行包装即可。 1. Dockerfile 这里dist文件夹,项目...
  • ZROI#961

    2019-10-04 21:22:38
    很诡异地一道题,你看他问的是否存在距离\(d\in [dist,1.1dist]\)的路径. 你想一下这个\(1.1\).好像不知道,先考虑暴力叭. 暴力你就\(bfs\),让点重复入队就好了,每个点维护一个\(set\),查询直接\(lower\_bound...
  • Windows下pip和virtualenv安装失败总结

    万次阅读 2018-02-19 00:43:29
    正想使用virtualenv环境管理包,一直报错,而且是拒绝访问,到底是啥问题?!! pip更新拒绝访问! PermissionError: [WinError 5] 拒绝访问。: 'i:\\python35\\lib\\site-packages\\pip-7.1.2.dist-info\\...
  • Win7 64位下安装Selenium

    2017-07-03 15:51:00
    例子基于python的,selenium的自己看吧。  网上找了下,貌似有些已经过时了,重新弄了下,记录过程。  0.安装python  (略)  我的python版本2.7.5  1.安装easy_install  只能使用...
  • jeecg项目部署笔记

    2021-01-18 10:29:42
    我一个前端超级小菜鸟也不会,鼓捣了好久 。 项目部署 打包 用的webstrom,Antd-Jeecg, 写好的项目 直接 build打包,会在项目目录下生成一个dist文件 将dist文件复制到服务器上的 nginx文件的HTML文件夹下 我...
  • 在使用Vue-router时,我使用require.context的方法实现自动写入路由,代码如下 在本地是没有任何问题的,但是当我build之后,将dist文件上传至服务器后,无法访问路由,报错如下 ...那么问题来了,到底是啥问题,求赐教
  • Spark RDD详解

    2016-03-10 16:05:00
      最近在阅读源码,发现这篇博客内容非常好,有助于快速理解代码。     ...上一章讲了Spark提交作业的过程,这一...简单的讲,RDD就是Spark的input,知道input是啥吧,就是输入的数据。 RDD的全名是Resilient Dist
  • 简单说一下:每个物品一个结点,边的权值,edge...一开始所有物品都置为原价,即所有dist[i]为原价,用dijkstra算法,算出0点(物品都没有)到各点的最短距离,求出dist[1]即为花费 枚举每个物品的等级为这条交
  • 由于在安装tomcat-native软件做关于tomcat与mysql数据库通过nvtive提升tomcat性能的时候编译安装tc-native由于相关软件版本过低,导致无法继续安装,以下解决思路过程和方法,及缺升级的原则进行解决思路....
  • 首先项目中config都不要改直接npm run build然后项目中就会多一个dist static所有静态资源 打包好后将index.html打开修改一下,把所有你引用的静态资源全都改一下以: ./开头 在你的云服务器上创建一个你想要的...
  • 你说为现在前端这么累,一会做h5网页,一会pc网站,一会又服务端渲染,一会又来一个桌面应用,一会又App,是不是就差操作数据库了,不,不对,如果你走的node 方向,那你就做到了,哈哈哈 vue 打包这些流程...
  • 26.sweetalert的使用

    2020-04-24 15:15:23
    sweetalert是啥? sweetalert是一个前端插件,可以提供好看的弹出框 2.使用 1. 在将要使用sweetalert的html文件中先导入sweetalert, ①使用cdn: <script src=...
  • NSTimer 怎么暂停继续

    千次阅读 2013-03-13 13:04:07
    那,API里面NSTimer 木有暂停继续的方法的,只有fire和invalidate,前者开工的意思,后者废掉的意思,如果用废掉来代替暂停的功能?显然不对的。...暂停: [timer setFireDate:[NSDate dist
  • HDFS之脱贫攻略

    千次阅读 2018-08-13 16:13:23
    1.1 文件系统(File System)是啥 文件系统是操作系统中统一管理信息资源的一种软件,管理文件的存储,检索,更新,提供安全可靠的共享和保护手段,方便用户使用。通过统一的命名空间——目录树来定位管理文件。 ...
  • Vue3.0 跨域问题

    2020-12-07 09:47:41
    这个破问题,也只有开发阶段有问题, 上传到服务器都一个域名有个问题 给大家看下 https://acg.xydwz.cn/api/api.php?return=json 我们请求的接口这个,就必须设置跨域问题 vue.config.js module....
  • Python 包管理工具

    2018-08-14 16:15:00
    这几个包管理工具有什么不同? distutils setuptools distribute disutils2 ...distlib ...easy_install、ez_setup.py、setup.py、setup.cfg分别都的? wheel 和 pip 的关系? Egg...

空空如也

空空如也

1 2 3 4 5
收藏数 89
精华内容 35
关键字:

dist是啥