vue.js项目打包上线
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的。这里我简单的列出这个过程:
首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:
上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./
第二个是环境设置为生产环境
修改好后打开cmd运行下面的命令打包即可:
注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:
这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题,比如大家可能在开发的时候使用的proxytable来解决跨域的问题,这里就会没有数据了,这个需要自己通过服务器在解决一下才可以的,proxytable在这里只是为了方便大家开发的跨域解决方案。
vue.js项目打包上线的更多相关文章
- vue.js 项目打包
vuejs是个前端框架,npm run dev的目的在于前端开发的时候可以实时调试.所以npm run dev 只是开发时期会用到,在生产环境中我们应该使用nginx,apahce tomcat等应用 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- vue.js项目构建
这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...
- vue.js项目安装
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
- 如何把vue.js项目部署到服务器上
如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...
- Vue.js项目的开发环境搭建与运行
写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...
- vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
- 建立多页面vue.js项目
介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...
- vue-cli脚手架搭建Vue.js项目
前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g PS:-g 就是 ...
随机推荐
- vb 水晶报表打印
vb里面的水晶报表打印控件:CrystalReportViewer 用到的dll文件: 水晶报表打印其实很简单,只要创建报表对象,再对其传递数据就可以打印出来.当然所传递的数据要与水晶报表设计里面的数 ...
- Mysql-表关系
表关系分为三种:一对一,一对多,多对多 一对多:一个学院对应多个学生,而一个学生只对应一个学院 -- 这儿classroom 是代表的学院. -- 一对多 - A表的一条记录 对应 B 表多条记 ...
- uva216-枚举-简单题
题意:n个计算机通过电缆连接,怎么连接使用的电缆最少 mmp,死wa不过,memset(vis,0,sizeof(per)),太不小心了 #include <iostream> #incl ...
- case功能菜单选项
脚本aim; 实现如下功能菜单并实现相应的功能;同在之前公司的一个游戏控制脚本; 1),显示当前时间; 2),显示cpu负载 3),显示剩余内存 0),退出脚本 如图菜单界面
- Python入门-散点图绘制
Python入门-散点图绘制 废话不说 直接上代码 import matplotlib.pyplot as plt x_values = list(range(1,1001)) y_values = ...
- 31. Next Permutation + 46. Permutations + 47. Permutations II + 60. Permutation Sequence
▶ 问题:字典序生成有关的问题. ▶ 31. 由当前序列生成字典序里的下一个序列. ● 初版代码,19 ms class Solution { public: void nextPermutation ...
- 过滤器 ;spring拦截器 切片 小结
1. springMVc的拦截器 实现HandlerInterceptor接口,如下: public class HandlerInterceptor1 implements HandlerInter ...
- 15.Result配置详解
转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 说明:在前面的许多案例中我们所用到的Action基本都继承自ActionSu ...
- IIS 更新EXE文件
IIS 更新EXE文件 MIME,add,文件扩展名带不带.都可以,会自动加上.的 文件扩展名:.exe MIME类型:application/octet-stream .ini文件
- JetBrains产品永久破解
吃水不忘挖井人,本博客转自:https://www.cnblogs.com/jyiqing/p/7699649.html 目的: 本人使用idea和webstorm进行开发,无奈正版实在是太贵了,只能 ...