你完成了工程开发,需要部署到外网环境,要进行下面的步骤:

一、首先你要购买一个服务器或者有自己的服务器。我介绍给大家的一个免费的服务器:http://free.3v.do/index.html可以免费内存空间100M;

二、修改项目config文件夹->index.js文件夹->assetsPublicPath(在build里边)@“/”改为@“./”,如:

module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},

然后:npm run build下生成一个dist文件夹,直接点开dist问价夹下的index.html就是你的项目,其他的static是你的资源文件;

这时候能打开就没问题,现在就是把dist目录下的所有文件(记住是dist文件下的)。

三、寻找上传工具:我用的都是免费的Yummy FTP;

绑定账号:

上传你的代码:

现在就打开你的域名:http://anneandpeter.3vcm.net/#/

就有你自己的项目网页了:(我用的是内网的ip,所以数据你们看不到,数据没有发布到外网)

vue.js打包部署线上的更多相关文章

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

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

  2. 如何将你的 Vue.js 项目部署在云开发静态托管之上

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...

  3. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

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

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

  5. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  6. Vue.js系列之vue-router(上) (转载自向朔1992)

    概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧.一般的单页面应用是基于路由或页面之间的链 ...

  7. vue.js 打包时出现空白页和路径错误

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...

  8. 本地虚拟机部署线上php程序---不需要修改数据库信息

    1.特别注意:拿来线上php程序后一般是不需要修改config.php里面的数据库连接信息的,如果修改了会报错:站点已关闭.所以 2.5 步骤是需要省略的.如果拿来的是最开始的php源码,需要配置原始 ...

  9. express框架开发接口部署线上环境PM2

    1.PM2介绍 PM2是一个线上环境下,用于启动nodejs进程守护的工具,用来保证服务的稳定及分摊服务器进程和压力. 2.下载安装 npm install pm2 -g  => pm2 --v ...

随机推荐

  1. [自带避雷针]DropShadowEffect导致内存暴涨

    原文:[自带避雷针]DropShadowEffect导致内存暴涨  [自带避雷针]DropShadowEffect导致内存暴涨 周银辉 从学习WPF开始, 就知道"位图效果"不是什 ...

  2. Shuttle ESB(六)——在工程中的应用

    假设你可能浏览在前面几篇文章ESB介绍,我相信,在这篇文章中,你会发现很多共鸣. 虽然.市面上开源的ESB确实很之多.像Java中的Mule ESB.Jboss ESB:.Net中的NServiceB ...

  3. JAVA实现黑客帝国代码雨效果

    import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...

  4. WPF 附加属性的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  5. jquery评分星星

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. 通通玩blend美工(3)——可爱的云

    原文:通通玩blend美工(3)--可爱的云 好久没有写这个系列的博客了,这里给个电梯吧,照顾新来的同学~~ 通通玩blend美工(1)——荧光Button 通通玩blend美工(2)——时钟 目前我 ...

  7. WPF4.0用tablet实现手写输入(更新XP SP3下也能手写输入方法)

    原文:WPF4.0用tablet实现手写输入(更新XP SP3下也能手写输入方法) 由于项目需求一个手写输入的控件,纠结了2天,终于搞定了. 主要是由于本人的英语不过关,一直和ocr混淆在一起,研究了 ...

  8. WPF 用代码调用dynamic resource动态更改背景 - CSDN博客

    原文:WPF 用代码调用dynamic resource动态更改背景 - CSDN博客 一般dynamic resoource通常在XAML里调用,如下范例: <Button Click=&qu ...

  9. 【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第十章 FluidMoveBehavior完全解析之三飞出ListBox吧 刚才有人说我的标题很给力,哈哈.那这个标题肯定更给力了 ...

  10. 【Git】打标签

    打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列出所有可用的标签,如何新建标签,以 ...