最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的。这里我简单的列出这个过程:

首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:

上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./

第二个是环境设置为生产环境

修改好后打开cmd运行下面的命令打包即可:

注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:

这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题,比如大家可能在开发的时候使用的proxytable来解决跨域的问题,这里就会没有数据了,这个需要自己通过服务器在解决一下才可以的,proxytable在这里只是为了方便大家开发的跨域解决方案。

vue.js项目打包上线的更多相关文章

  1. vue.js 项目打包

    vuejs是个前端框架,npm run dev的目的在于前端开发的时候可以实时调试.所以npm run dev 只是开发时期会用到,在生产环境中我们应该使用nginx,apahce tomcat等应用 ...

  2. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  3. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  4. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  5. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...

  6. Vue.js项目的开发环境搭建与运行

    写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...

  7. vscode下面开发vue.js项目

    vscode下面开发vue.js项目   https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...

  8. 建立多页面vue.js项目

    介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...

  9. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

随机推荐

  1. Static / Const 的概念

    C/C++/Java Static / Const 的概念 这里以C为准,其他语言类似. Static变量是指分配不变(只可分配一次,以后再分配就无效了.)的变量 -- 它的存活寿命或伸展域可以贯穿程 ...

  2. uva-165-枚举

    题意:选取k种面额的邮票,总数是h,要求组合出来的连续数最大 枚举,网上看到一个更快的等价类划分,留着学等价类划分的思路 #include<stdio.h> #include<ios ...

  3. (4/24) webpack3.x快速搭建本地服务和实现热更新

    写在前面: (1)为了防止版本兼容问题,此处的webpack版本与之前的一致为:webpack@3.6.0.同时这里我们安装的webpack-dev-server版本是2.9.7版本. (2)之前已经 ...

  4. 关于RabbitMQ以及RabbitMQ和Spring的整合

    转自:https://www.cnblogs.com/s648667069/p/6401463.html 基本概念 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是 ...

  5. idea中创建多module的maven工程

    以前自学Java web的时候,我们都是创建一个web工程,该工程下面再创建dao.service.controller等包.自从工作以后,我们会发现现在的web项目包含多个module,contro ...

  6. python2限制函数传入的关键字参数

    在Python2 中,可以通过使用**kwargs,在函数中配合使用kwargs.pop(key, False)实现获取限制关键字参数值,如果未传入则设置默认值,当所有需要的关键字参数都pop完毕,如 ...

  7. Oracle免客户端InstantClient安装使用

    正常情况下,用PL/SQL等软件连接Oracle,需要安装Oracle客户端软件,一般安装oracle客户端差不多需要2G左右的硬盘空间,但如果我们仅仅是连接数据库进行查询和执行一些相应的语句而不进行 ...

  8. ArcGIS模型构建器案例学习-批量删除空要素类地理模型

    ArcGIS模型构建器案例学习笔记-批量删除空要素类地理模型 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:批量删除记录个数为0的矢量文件 优点:逻辑清晰,不 ...

  9. vim使用方法:

    vim使用方法: 模式: 编辑模式.未编辑模式.命令行模式 i 插入形式进入编辑模式 a 增加 o 下行编辑 O 上行插入 : 进入命令行模式 esc 退出编辑模式 wq 保存文件 yy 复制 p 粘 ...

  10. python的map函数和reduce函数(转)

    map函数 map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例 ...