1.vue cli给我们提供了npm run build命令打包项目，在packa.json文件中scripts对象中有build属性，当我们执行npm run build时，就执行build对应的"node build/build.js"脚本

build完成后显示

进入项目文件夹，找到dist文件夹，这些是打包后产生的文件

2.webpack打包过程中会将css和js文件单独提取出来，且会根据path存放进相应的文件夹下，形成如上图的根目录，文件名是根据内容产生的哈希值，文件内容改变，哈希值也会改变，项目中static目录下的文件也会全部拷贝到dist目录下的static文件下。

3.build后需要使用app server启动index.html文件，在根目录下创建文件

不让别人配置，将sourceMap改为false

node prod.server.js

【vue】饿了么项目-使用webpack打包项目的更多相关文章

  1. Vue老项目支持Webpack打包

    1.老的vue项目支持webpack打包 最近在学习Vue.js.版本是2.6,webpack的版本也相对较老,是2.1.0版本.项目脚手架只配置了npm run dev和npm run build. ...

  2. 如何使用webpack打包项目

    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt.之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程. Grunt和Gulp的工作方式是:在一个配置文件中, ...

  3. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  4. Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  5. vue项目通过webpack打包生成的dist文件放到express环境里运行（vue+webpack+express）

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  6. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  7. 纯webpack打包项目

    webpack 3 零基础入门教程 http://webpackbook.rails365.net/466996(文本) https://www.rails365.net/movies/webpack ...

  8. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  9. 如何降低Vue.js项目中Webpack打包文件的大小？

    https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...

随机推荐

  1. php 函数的嵌套

    /*一定要小心变量作用域*/ function insert_dynamic() { function bar() { echo "I don't exist until insert_dy ...

  2. java技术秘籍 转摘

  3. HBase—列族数据库的术语

    1. 列族数据库的基本组件 键空间,行键,列,列族 2. 什么是键空间 keyspace? 键空间 keyspace 是列族数据库的顶级数据结构,它在逻辑上能够容纳列族,行键以及与之相关的其他数据结构 ...

  4. 旋转/非旋转treap的简单操作

    treap(树堆) 是在二叉搜索树的基础上,通过维护随机附加域,使其满足堆性质,从而使树相对平衡的二叉树: 为什么可以这样呢? 因为在维护堆的时候可以同时保证搜索树的性质: (比如当一棵树的一个域满足 ...

  5. Linux 的su 与sudo 的区别,查看所有用户

    首先,我们要知道系统当中存在哪些用户. 1.用户名和密码的存储位置 存储帐号的文件:/etc/passwd 存储密码的文件:/etc/shadow 通过/etc/shadow获取的只是密码加密后的Ha ...

  6. FineReport如何手动推送APP消息

    在报表填报成功后,发送消息至APP会提示数据已更新.再次期间用户需要有查看该模板的权限,如果没有的话,则无法接受到提示信息.那么在FineReport移动端中,如何手动推送APP消息呢? 具体用法 在 ...

  7. Android 获取SD卡的图片资源

    首先我先获得SD卡下的根目录路径: privateString isSdcard(){ File sdcardDir=null; boolean isSDExist=Environment.getEx ...

  8. php 空格无法替换，utf-8空格惹的祸

    一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...

  9. ubuntu下面解压tar.gz包报错：tar命令报错： gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error

    原因: 压缩包文件不完整(损坏或者其他原因) 比如今天下载的tomcat8,使用ubuntu的命令下载的 curl -O http://apache.mirrors.ionfish.org/tomca ...

  10. XSS防范之Encode（转）

    防范XSS有三道防火墙:数据的输入校验,数据输出Encode,浏览器安全(主要就是CSP),这里主要介绍Encode. #用于XSS防范的Encode 用户防范XSS的Encode主要有三种:Html ...