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. ASP.NET Button控件的UseSubmitBehavior属性引发的血案

    这里先不说标题上的UseSubmitBehavior属性是什么,先说下面这种情况. 通常,在我们写一个表单页面的时候,最下方会有“提交”和“返回”字样的两个按钮.顾名思义,它们的功能大家都知道,但是一 ...

  2. ETL第一篇(Kettle Spoon) 初遇

    ETL第一篇(Kettle Spoon) 初遇 ETL第二篇 调用webservice 简介 Kettle 是一款国外开源的 ETL 工具,纯 Java 编写,绿色无需安装,数据抽取高效稳定(数据迁移 ...

  3. 撩课-Web大前端每天5道面试题-Day13

    1.前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面titl ...

  4. UVA1584（环状序列）

    对于序列的最小值,可以定义一个比较的方法,然后用一般找最小值的方法遍历一遍即可 #include <iostream> #include <string> #include & ...

  5. UVA1583（最小生成元）

    对于这种需要一遍遍枚举求解的,打表可以提高很多效率 #include <iostream> #include <string> #include <cstring> ...

  6. IDEA 2017.2.2 环境下使用JUnit

    JUnit:单元测试框架,测试对象为一个类中的方法. JUnit不是Javase的一部分,想要使用需要导入jar包,在IntelliJ IDEA 中自带JUnit插件. JUnit 版本有3.X 4. ...

  7. JavaScript & jQuery & Bootstrap

    一.前言 javascript 简称 JS  与java编程语言 没有什么关系 JavaScript: {核心(ECMAScript) 文档对象模型(DOM) Document object mode ...

  8. RecyclerView之UI与数据绑定

    package activity.cyq.com.learnrsv; import android.support.v7.widget.RecyclerView; import android.vie ...

  9. 基于PMBOK的项目管理知识体系

  10. ubuntu16 下安装redis 以及设置其为开机启动

    1.下载redis安装包 sudo wget http://download.redis.io/releases/redis-3.2.6.tar.gz 2.解压 tar -zxvf  redis-3. ...