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. 16、IO (Properties、序列化流、打印流、CommonsIO)

    Properties集合的特点 * A: Properties集合的特点 * a: Properties类介绍 * Properties 类表示了一个持久的属性集.Properties 可保存在流中或 ...

  2. rgbdslam 源代码的实现

    经过一番努力,终于跑通了felix.endres的rgbd slam v2 源码,中间遇到挺多问题.总结如下: (1) 关于SiftGPU问题:ERROR: SiftGPU cannot be com ...

  3. ArrayList封装

    package com.cn.test.jihe; import java.util.Arrays; /** * * insert * delete * update * get * */ publi ...

  4. spring-security 开启注解权限控制为什么没有效果

    如果配置在spring-security中没有权限控制效果,可以配置在springmvc中试试 <security:global-method-security pre-post-annotat ...

  5. Java基础之JDK的下载与安装

    做Java开发已经很长一段时间了,最近在回顾Java的基础知识,感觉好多都是知道这个概念,能说个皮毛,但是往深了说又不知道怎么说,所以打算对Java从头做一个回顾,算是对自己所学知识的一个巩固和深入了 ...

  6. UVA 455（最小周期）

    最小周期可以用%枚举 #include <iostream> #include <string> #include <cstring> #include <c ...

  7. MySQL：SQL进阶

    一.数据库相关理论 1.系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_s ...

  8. JavaScript的进阶之路（七）客户端JavaScript知识点总结

    一.客户端JavaScript主要是BOM DOM的操作和js脚本的兼容性.互用性.可访问性.安全性的应用.以及一些框架的引用. 二.BOM:浏览器对象模型 主要介绍window对象 1.定时器:se ...

  9. Activity 四种launchMode

    launchMode在多个Activity跳转的过程中扮演着重要的角色,它可以决定是否生成新的Activity实例,是否重用已存在的 Activity实例,是否和其他Activity实例公用一个tas ...

  10. Java快速入门-03-小知识汇总篇（全）

    Java快速入门-03-小知识汇总篇(全) 前两篇介绍了JAVA入门的一系小知识,本篇介绍一些比较偏的,说不定什么时候会用到,有用记得 Mark 一下 快键键 常用快捷键(熟记) 快捷键 快捷键作用 ...