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. Mybatis初始

    1.Mybatis 的作用 完成基本的sql语句 和 存储过程 高级的对象关系映射(ORM) 框架 封装了几乎所有的 JDBC 代码 参数的手工设置 结果集的遍历 2.Mybatis 框架的主体构成 ...

  2. VS2013漂亮字体

    使用字体:Fixedsys Excelsior 3.011.首先下载字体:http://www.fixedsysexcelsior.com/ 2.安装字体:控制面板 -> 字体,复制下载的文件进 ...

  3. 二、hdfs单节点安装

    一.准备环境 在配置hdfs之前,我们需要先安装好hadoop的配置,本文主要讲述hdfs单节点的安装配置. hadoop的单节点安装配置请参考:https://www.cnblogs.com/lay ...

  4. 深入理解LinkedBlockingQueue

      说明 通过阅读源码,了解LinkedBlockingQueue的特性.本文基于JDK1.7源码 正文 通过查询API对LinkedBlockingQueue特点进行简单的了解: LinkedBlo ...

  5. dbUtils 中的各种 Handler 什么 意思

    ArrayHandler:把结果集中的第一行数据转成对象数组. ArrayListHandler:把结果集中的每一行数据都转成一个对象数组,再存放到List中. BeanHandler:将结果集中的第 ...

  6. 关于 PHPMailer 邮件发送类的使用心得（含多文件上传）

    This is important for send mail PHPMailer 核心文件 class.phpmailer.php class.phpmaileroauth.php class.ph ...

  7. SublimeText 批量清除空行

    sublimeText 编辑器批量清除空行: 1.CTRL+H 打开 replace 功能 2.选择 Regular expression 功能 3.批两替换  点击replace All

  8. SPARK - Execute Framework

    Spark函数详解系列之RDD基本转换 https://www.cnblogs.com/MOBIN/p/5373256.html The  RDD provides low level API for ...

  9. Non-resolvable parent POM for com.*******

    场景: 同事新打了一个jar包到私服里面,自己删除了本地对应的中央仓库的依赖包,再次重新下载.  于是我又打开了一个idea的窗口重新引入这个项目,然后重新下载依赖的服务. 结果就一直报这个问题... ...

  10. Linux下部署配置Nginx

    1.安装工具包 yum install -y wget 下载工具 yum install -y vim-enhanced vim编辑器 yum install -y make cmake gcc gc ...