通过vue-cli创建的工程,默认已经打好了基础,包含vue-loader webpack。

通常我们开发中,使用npm run dev进行开发,webpack会Hot reload,不用我们手动刷新浏览器,很是方便。

但是真正部署的时候,需要使用npm run build命令。

这一步命令会压缩代码,打指纹等等。

可以看到dist目录下是这样的目录结构

原来的static目录内的文件,会原样不动上传到dist的static目录下。

/index.html

/static

----/img

----/js

-------/app.83992983.js

-------/vendor.dklajdkfjwer.js

------/ 更多

---/更多文件省略

生产环境下,生成的dist目录下的文件,上传到服务器的www目录下面就可以了。

放到apache或者nginx下面都可以,或者node服务器都可以。如果是node,需要使用nginx代理node的端,也就是配置Location啦,不懂得前端同学可以问问后台。

Vue项目的部署的更多相关文章

  1. vue项目如何部署到Tomcat中

    vue项目如何部署到Tomcat中 1,假设你要访问的项目名称为'hms' 2,在Tomcat的webapps下创建hms文件夹, 3,配置config/index.js文件,build: {} 选项 ...

  2. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  3. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  4. Vue路由器的hash和history两种工作模式 && Vue项目编译部署

    1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...

  5. Vue项目打包部署到apache服务器

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...

  6. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  7. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  8. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  9. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

随机推荐

  1. windows phone 8.1开发:文件选择器FileSavePicker

    上一篇文章小梦分享了文件选择器FileOpenPicker的用法,这篇文章我们继续分享FileSavePicker的用法,FileSavePicker的用法几乎和FileOpenPicker用法一模一 ...

  2. 前端学PHP之Session

    前面的话 Session技术和Cookie相似,都是用来储存使用者的相关资料.但最大的不同之处在于Cookie是将数据存放在客户端的计算机之中,而Session则是将数据存放于服务器系统之下.Sess ...

  3. ATM取款~~

    package com.jredu.ch03; import java.util.Scanner; public class Atmmmmmmmmmm { static int totalMoney= ...

  4. JVM中堆内存和栈内存的区别

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  5. 多线程CountDownLatch和Join

    如果现在有五个线程A.B.C.D.E,请问如何用E线程用于统计A.B.C.D四个线程的结果? 题意需要用E线程统计A.B.C.D四个线程,也就是说E线程必须要等到前面四个线程运行结束之后才能执行.那么 ...

  6. python之字符串

    字符串与文本操作 字符串: Python 2和Python 3最大的差别就在于字符串 Python 2中字符串是byte的有序序列 Python 3中字符串是unicode的有序序列 字符串是不可变的 ...

  7. 采用Spring AOP+Log4j记录项目日志

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6567672.html 项目日志记录是项目开发.运营必不可少的内容,有了它可以对系统有整体的把控,出现任何问题 ...

  8. linux redis安装

    redis官网地址:http://www.redis.io/ 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载源码,解压缩后编译源码. $ wget http://down ...

  9. 通过UDP广播实现Android局域网Peer Discovering

    本文是对个人笔记中内容的整理,部分代码及图片来自互联网,由于不好找到原始出处,所以未加注明. 如有痛感,联系删除. 本文将介绍以下知识点: TCP与UDP的区别: 单播.多播.广播: Java中实现U ...

  10. c#FTP操作类,包含上传,下载,删除,获取FTP文件列表文件夹等Hhelp类

    有些时间没发表文章了,之前用到过,这是我总结出来关于ftp相关操作一些方法,网上也有很多,但是没有那么全面,我的这些仅供参考和借鉴,希望能够帮助到大家,代码和相关引用我都复制粘贴出来了,希望大家喜欢 ...