1.先修改配置文件再打包。有些人打包后运行一片空白,主要是由于路径问题

所以首先需要修改config下的index.js配置文件

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

2. 需注意的是,这种打包方式不能使用vue-router的history,应使用默认的hash模式

3. 修改后打开cmd运行 npm run build 打包命令

可以使用浏览器直接打开index.html文件 可以看到项目内容

4. 另外也可以将打包后文件放到服务器打开,若想自己测试运行是否正常 ,可利用node的express方法

安装

express: npm install -g express;

最新express4.0版本中将命令工具分家出来了,还需要安装一个命令工具:

npm install -g express-generator

创建一个express工程:

 express helloworld   //hellworld为自定义名称

进入项目主目录:

cd helloworld

安装必备包:

npm install

启动程序:

 npm start

把打包后的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看到项目了,这样测试好了后,就可以丢后台了

vue-cli+webpack打包,上线的更多相关文章

  1. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  2. Vue Cli 3 打包上线 部署到Apache Tomcat服务器

    使用 npm run build 打包项目 在根目录中有一个dist文件夹 我使用的服务器是 Apache  Tomcat 把项目放进tomcat /webapps 中 启动服务器 <mac O ...

  3. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  4. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  5. vue cli 3 打包过大问题

    vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...

  6. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  7. Vuejs技术栈从CLI到打包上线实战全解析

    前言 本文是自己vue项目实践中的一些总结,针对Vue2及相关技术栈,实践中版本为2.3.3. 开发前须知 vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜 ...

  8. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  9. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...

  10. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

随机推荐

  1. 开源题材征集 + MVC&EF Core 完整教程小结

    到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向 ...

  2. 【资源共享】eBook分享大集合

    传送门:[GitHub] 欢迎各位指点,要是能补充更是感激不尽. 主要以IT领域经典书籍收藏,以备不时之需,不一定都能看完,权且当做收藏好玩. [x] 表示文件大小超过100M(LFS). 服务器系统 ...

  3. 渗透之路基础 -- SQL注入

    目录 mysql注入(上) limit 有两个参数 limit 2,3 表示从2开始查3条 通过MySql内置数据库获取表名 通过MySql内置数据库获取表名对应的列名 mysql注入(中) SQL常 ...

  4. windows安装elasticsearch服务以及elasticsearch5.6.10集群的配置(elasticsearch5.6.10配置跟1.1.1的配置不太相同,有些1.1.1版本下的配置指令在5.6.10中不能使用)

    1.下载elasticsearch5.6.10安装包 下载地址为:  https://artifacts.elastic.co/downloads/elasticsearch/elasticsearc ...

  5. .NET平台下,钉钉微应用开发之:获取userid

    工作需求,开发钉钉微应用和小程序,之前有接触过支付宝小程序和生活号的开发,流程没有很大的差别,这里记录下我用ASP.NET MVC实现钉钉微应用的开发,并实现获取用户的userid.小弟我技术有限,本 ...

  6. 【Leetcode】【简单】【217. 存在重复元素】【JavaScript】

    题目描述 217. 存在重复元素 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [ ...

  7. HTML(二)属性,标题,段落,文本格式化

    HTML属性 HTML属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="value" 常用属 ...

  8. ACM-ICPC 2018 徐州赛区(网络赛)

    目录 A. Hard to prepare B.BE, GE or NE F.Features Track G.Trace H.Ryuji doesn't want to study I.Charac ...

  9. Storm VS Flink ——性能对比

    1.背景 Apache Flink 和 Apache Storm 是当前业界广泛使用的两个分布式实时计算框架.其中 Apache Storm(以下简称"Storm")在美团点评实时 ...

  10. Kubernetes --- 详细介绍和架构详解

    Kubernetes是一个跨主机集群的开源的容器调度平台,它可以自动化应用容器的部署,扩展和操作,提供以容器为中心的基础架构 目录 一. Kubernetes用途 二. Kubernetes特点 三. ...