一、打包生成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. Docker系列01—容器的发展历程---Docker的生态圈

    本文收录在容器技术学习系列文章总目录 Docker 和容器技术的发展可谓是日新月异,本文试图以全局的视角来梳理一下 docker 目前的生态圈.既然是概览,所以不会涉及具体的技术细节. Docker ...

  2. App阅读pdf和扫描二维码功能

    在之前开发的Android手机App中,需要实现阅读pdf和扫描二维码的功能,在github 上找到大牛封装好包,亲测可用. 阅读pdf: https://github.com/barteksc/An ...

  3. Oracle 11g设置IP访问限制

    出于数据安全考虑,对Oracle数据库的IP做一些限制,只有固定的IP才能访问. 修改$ORACLE_HOME/network/ADMIN/sqlnet.ora文件 增加以下内容(红色表示注释): # ...

  4. IaaS，PaaS，SaaS 的区别

    原文:http://www.ruanyifeng.com/blog/2017/07/iaas-paas-saas.html 越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. Ia ...

  5. Java开发笔记（四十七）关键字this的用法

    前面介绍了类的基本定义,包括成员属性.成员方法.构造方法几个组成要素,可谓是具备了类的完整封装形态.不过在进行下一阶段的学习之前,有必要梳理一下前述的类定义代码,看看是否存在哪些需要优化的地方.首先观 ...

  6. Linux CentOS开机启动项设置命令：chkconfig

    1.开机启动+++crontab 定时执行(定时执行可参考:https://www.cnblogs.com/prefectjava/p/9399552.html)可实现自动化运行的目的,简化了维护人员 ...

  7. Zookeeper 分布式机器部署

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  8. JS最简单的字符串转数字类型

    以前无休止的写parseInt,特别复杂,现在只需要一个加号,就可以完成对字符串的转换 1 === +"1" amazing!

  9. PostGIS计算矢量切片(一)--渲染数据

        没写错,是使用postgis计算出来矢量切片.在这之前先准备一个数据:一个GIS数据表(本例中数据为一百万的点数据,坐标:4326),并在表中添加x,y字段,方便后面的数据筛选.sql中用到了 ...

  10. 设置抓包工具Fiddler的host

    大家都知道在电脑本地上有一个Host文件. Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定.可以用文本文件打开!当用户在浏览器中输入一个需要登录的网址时,系统 ...