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. 0/1背包问题（DP）

    Description 给定 n 个物品和一个背包.物品 i 的重量是 wi ,其价值为 vi ,背包的容量为 C .问:应该如何选择装入背包的物品,使得装入背包中物品的总价值最大? Input 输入 ...

  2. NET Core 应用程序 IIS 运行报错 502.3-Gateway

    转自:http://www.zmland.com/forum.php?mod=viewthread&tid=941 将 NET Core 应用程序部署在 IIS 环境,默认配置下,如果任务执行 ...

  3. 一、spark单机安装

    如果要全面的使用spark,你可能要安装如JDK,scala,hadoop等好些东西.可有时候我们只是为了简单地安装和测试来感受一下spark的使用,并不需要那么全面.对于这样的需要,我们其实只要安装 ...

  4. 腾讯云安全组，实现服务器外网ip访问网站

    添加访问地ip出入站规则HTTP,并将云主机添加到安全组中.

  5. [LeetCode] Binary Tree Postorder题解

    Binary Tree Postorder Given a binary tree, return the postorder traversal of its nodes' values. For ...

  6. jenkins 参数化构建过程

    构建项目时我们可能需要切换到另一个分支编译,或者说每次编译版本都要加1,这时候我们可以改配置或者改脚本文件,这显然不是一个好的方式,那么如何能在编译前让用户输入参数呢?jenkins早就为我们考虑好 ...

  7. RN canvas画布大小之谜

    一.需求 在一个高640.宽360的canvas内画一些坐标点. 二.问题 坐标点只显示了一部分,剩下的点没显示(其坐标属于(640,360)区域). 三.原因 canvas默认的画布大小是高150, ...

  8. UOJ450. 【集训队作业2018】复读机

    传送门 \(d=1\) 输出 \(k^n\) \(d=2\),构造生成函数,就是求 \[(\sum_{i=0}^{\infty}[2|i]\frac{x^i}{i!})^k[x^n]=(\frac{e ...

  9. MyEclips 2017/2018 （mac 版）安装与破解

    MyEclips 2017/2018 (mac 版)安装与破解 现在在学J2EE,然后使用的工具就是 MyEclipse,现在就抛弃 Eclipse 了,我就不多说它俩的区别了,但是 MyEclips ...

  10. Android图片处理--缩放

    PS:在开发中我们会遇到一些图片处理问题,比如说缓存图片了.限制图片大小了.查看图片了等.上一篇文章介绍了图片的全景效果查看,今天介绍一个图片缩放,我们如果有时间的话,可以自己写一个属于自己的库,里面 ...