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. Kubernetes 再深入一点点

    kb master 运行如下容器 etcd 是 k8s 的核心, 主要负责k8s的核心数据处理及保存, 需要备份该数据,或者做集群 ,服务端口 2379(客户端服务) 2380(节点通信)kube-c ...

  2. 缓冲区溢出实例(一)--Windows

    一.基本概念 缓冲区溢出:当缓冲区边界限制不严格时,由于变量传入畸形数据或程序运行错误,导致缓冲区被填满从而覆盖了相邻内存区域的数据.可以修改内存数据,造成进程劫持,执行恶意代码,获取服务器控制权限等 ...

  3. .NET Core 很酷,你不得不知!

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.infoq.cn/article/xPTBAR9-oJcVtUjTQ0tK ...

  4. 字符串匹配算法之————KMP算法

    上一篇中讲到暴力法字符串匹配算法,但是暴力法明显存在这样一个问题:一次只移动一个字符.但实际上,针对不同的匹配情况,每次移动的间隔可以更大,没有必要每次只是移动一位: 关于KMP算法的描述,推荐一篇博 ...

  5. Spring Boot集成quartz实现定时任务并支持切换任务数据源

    org.quartz实现定时任务并自定义切换任务数据源 在工作中经常会需要使用到定时任务处理各种周期性的任务,org.quartz是处理此类定时任务的一个优秀框架.随着项目一点点推进,此时我们并不满足 ...

  6. Java多线程之线程的生命周期

    Java多线程之线程的生命周期 一.前言 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态.在线程的生命周期中,它要经过新建(New).就绪(Runnable).运行(R ...

  7. Leetcode之深度优先搜索&回溯专题-638. 大礼包(Shopping Offers)

    Leetcode之深度优先搜索&回溯专题-638. 大礼包(Shopping Offers) 深度优先搜索的解题详细介绍,点击 在LeetCode商店中, 有许多在售的物品. 然而,也有一些大 ...

  8. 在.net core web 项目中使用Nlog记录日志

    第1步,添加NLog.Web.AspNetCore包引用 方法1 在项目上右击“依赖项”---“管理Nuget程序包(N)…”,然后在浏览对话框中输入“NLog.Web.AspNetCore”查找包, ...

  9. 2019牛客暑期多校训练营(第二场)J-Subarray(思维)

    >传送门< 前言 这题我前前后后看了三遍,每次都是把网上相关的博客和通过代码认真看了再思考,然并卵,最后终于第三遍也就是现在终于看懂了,其实懂了之后发现其实没有那么难,但是的的确确需要思维 ...

  10. 洛谷P2577 [ZJOI2005]午餐 打饭时间作为容量DP

    P2577 [ZJOI2005]午餐 )逼着自己做DP 题意: 有n个人打饭,每个人都有打饭时间和吃饭时间.有两个打饭窗口,问如何安排可以使得总用时最少. 思路: 1)可以发现吃饭时间最长的要先打饭. ...