一、打包生成dist目录

　　运行npm run build 进行打包，控制台显示“Build complete”表示打包完成了。

npm run build

二、dist目录放到后端跟目录

　　打包后生成一个dist文件夹，文件夹下有index.html和static文件夹。这些就是最终要上线的代码。

　　找到后台服务器的跟路径，把打包生成的index.html和static文件夹放到跟路径下。这时访问后端的服务器，就会把默认的index.html文件显示出来。index引入了static里的各种文件，整个项目就可以运行起来了。同时，后端服务器上还有后端提供的数据接口。

三、配置路径

　　如果希望打包生成的文件不放在根目录下，而在project目录下，需要修改配置项 config/index.js。修改完成后，再次运行“npm run build"打包，打包完成后，把打包生成的index.html和static文件夹放到后台的project目录下就行。

Vue-项目打包上线的更多相关文章

  1. vue项目打包上线时的配置操作

    vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...

  2. vue项目打包上线发现 360 浏览器不兼容？

    分享链接: 文档:解决vue 和 360 浏览器兼容问题.note链接:http://note.youdao.com/noteshare?id=41914c6dbb4238d765b26d59aa05 ...

  3. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

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

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

  5. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  6. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  7. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  8. vue项目打包，生成dist文件夹，如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  9. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  10. vue项目打包-2-九五小庞

    vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...

随机推荐

  1. 史上最走心webpack4.0中级教程——配置之外你应该知道的事

    <webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的 ...

  2. 第43章 添加更多API端点 - Identity Server 4 中文文档(v1.0.0)

    您可以向托管IdentityServer4的应用程序添加更多API端点. 您通常希望通过它们所托管的IdentityServer实例来保护这些API.这不是问题.只需将令牌验证处理程序添加到主机(请参 ...

  3. Android开发——Notification通知的各种Style详解

    本来是想与之前讲解使用Notification通知使用一起写的,查看了资料,觉得有必要将这Style部分单独拿出来讲解 前篇:Android开发——Notification通知的使用及Notifica ...

  4. 经典面试题：从 URL 输入到页面展现到底发生什么？

    前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解! 本文首发地址为GitHub 博客,写文章不易,请多多支持与关注 ...

  5. vue.js引入

    开始学习vue.js,引入vue.vue.js一定要在head里面引入,实际开发中我们可能在body中引入,但是可能存在抖屏现象. 为了避免出现抖屏现象,我们引入vue.js或者jquery.js 最 ...

  6. JS 关于 bind ,call,apply 和arguments p8

    关于这3个货,网上有很多文章介绍,我这边还是记录下并加上自己的理解,还有arguments函数内置对象顺便也记录下: 简单的说apply和call 会绑定第一个参数的作用域给调用函数对象实例,并会执行 ...

  7. tarjan系列算法代码小结

    个人使用,可能不是很详细 强联通分量 这里的dfn可以写成low 因为都是在栈中,只要保证该节点的low值不为本身即可 void tarjan(int now) { dfn[now]=low[now] ...

  8. iOS----------关于Cornerstone的偏好设置

    应用场景:有时候我们的项目会导入一些第三方.a文件,但是当我们在svn上check out下来的时候,会发现少了一些.a文件.于是乎项目就报错了. 针对这种情况,我们应该怎么办呢? 1.先打开Corn ...

  9. gitbook 入门教程之发布电子书

    输出目标文件 语法格式: gitbook build [book] [output] 默认情况下,gitbook 输出方式是静态网站,其实 gitbook 的输出方式有三种: website, jso ...

  10. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...