一、打包生成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. 浅析java程序的执行过程

    在研究任何一门语言时,无论是面向过程的c,c++(面向过程和面向对象),还是面向对象的.net,java等,弄清语言执行过程至关重要.  何为语言执行过程? 所谓语言执行过程,指对于任何一门语言,如j ...

  2. tomcat 大并发报错 Maximum number of threads (200) created for connector with address null and port 80

    1.INFO: Maximum number of threads (200) created for connector with address null and port 80 说明:最大线程数 ...

  3. 基于C#&.net2.0的windows服务创建与安装

    起因:一台服务器中部署的程序,停电后未按照计划任务正常启动. 一.创建并配置Windows服务程序 开发工具VS2015 Framework版本2.0 1.新建Windows服务 2.在Service ...

  4. Java开发笔记（十三）利用关系运算符比较大小

    前面在<Java开发笔记(九)赋值运算符及其演化>中提到,Java编程中的等号“=”表示赋值操作,并非数学上的等式涵义.Java通过等式符号“==”表示左右两边相等,对应数学的等号“＝”: ...

  5. Java开发笔记（四十四）本地日期时间与字符串的互相转换

    之前介绍Calendar的时候,提到日历实例无法直接输出格式化后的时间字符串,必须先把Calendar类型转换成Date类型,再通过格式化工具SimpleDateFormat获得字符串.而日期时间的格 ...

  6. Android Studio 关于沉浸式状态栏

    values-v19/style.xml <style name="AppTheme" parent="Theme.AppCompat.Light.NoAction ...

  7. nodejs cookie与session

    cookie.session cookie:在浏览器保存一些数据,每次请求都会带过来 *不安全.有限(4K) session:保存数据,保存在服务端 *安全.无限 ------------------ ...

  8. GeoServer安装配置

    需安装文件 1.安装jdk 2.安装GeoServer: (1).在安装GeoServer前,需要安装java运行环境,点击文件夹内的jdk安装文件,选择jdk安装路径进行安装:直到安装完成. (2) ...

  9. 我想要革命想要解脱——bootstrap常见问题及解决方式

    最近一个月,恍若隔世,天天加班,昨晚终于发版了,今天才喘一口气.有时候,即便你工作效率再怎么高,撸码再怎么快也无可避免的会加班.不信的话,可以先给你定一个交付时间,然后不断的给你加需求,就让你一个人做 ...

  10. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...