Vue项目的部署
通过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项目的部署的更多相关文章
- vue项目如何部署到Tomcat中
vue项目如何部署到Tomcat中 1,假设你要访问的项目名称为'hms' 2,在Tomcat的webapps下创建hms文件夹, 3,配置config/index.js文件,build: {} 选项 ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue项目 打包部署上线
1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...
- Vue路由器的hash和history两种工作模式 && Vue项目编译部署
1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...
- Vue项目打包部署到apache服务器
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
- vue项目打包部署elementUI的字体图标丢失问题
自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
- vue项目打包部署到服务器,静态资源文件404
js文件404问题 原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...
- vue项目打包部署到nginx 服务器上
假如要实现的效果如下 http://ip/vue =>是进入首页访问的路径是 usr/local/nginx/html/vue http://ip/website =>是进 ...
随机推荐
- 重启osd服务失败:Start request repeated too quickly
背景 OS:Ubuntu 16.04 修改了osd的一些配置,修改后,需要重启osd服务才能生效.第一次重启后,配置立刻生效.再改了一些配置,重启osd服务后,配置却不再生效了.ps命令查看进程,发现 ...
- Java基础二:常量池
目录: 自动装箱与拆箱 常量池 ==与equals()区别 1. 自动装箱与拆箱 Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成 ...
- Zeppelin interperter 模式设置总结
如有错漏,望请指正,不胜感激. 参考:[zeppelin官网]:https://zeppelin.apache.org/docs/latest/interpreter/spark.html#inter ...
- 利用echo命令实现倒计时的功能
echo -e:启用反斜线控制字符的转换 -E:关闭反斜线控制字符的转换(预设如此) -n:取消行末之换行符号(与 -e 选项下的 \c 字符同意 -e参数下的控制参数 \ ...
- TensorFlow安装-ubuntu
windows下某些tensorflow例子跑不成功,比如https://www.tensorflow.org/tutorials/wide 中的例子报下面的错误:' 'NoneType' objec ...
- js面向对象-原型链
var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...
- 学习Jammendo代码的心路历程(二)ViewFlipper数据的填充
打开Jammendo进入到首页之后,会看到这样一个界面.可以看到下左效果,我们可以看到,他是上部分的ViewFlipper模块和下半部分的listview模块构成的,今天就简单的说一下Jammendo ...
- 4.Redis常用命令:List
在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的元素.在插入时,如果该键并不存在,Redis将为该键创建 ...
- AngularJS1.X学习笔记1-整体看看
听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...
- oracle的insert的时候&符号如何插入(转义)
chr(38)替换& insert into table values( 'http://localhost:8080/index.action?username=138& ...