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. 关于Js debounce 函数小结

    一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

  2. node爬虫的几种简易实现方式

    说到爬虫大家可能会觉得很NB的东西,可以爬小电影,羞羞图,没错就是这样的.在node爬虫方面,我也是个新人,这篇文章主要是给大家分享几种实现node 爬虫的方式.第一种方式,采用node,js中的 s ...

  3. 【JVM从小白学成大佬】开篇

    JVM的重要性毋庸置疑,可以毫不夸张的说Java虚拟机是整个Java平台的基石. JVM方面的知识,也一直是BAT等大厂面试考核的重点.特别是JVM调优,故障排查性能调优,你知道该从哪些方面入手吗? ...

  4. LSTM 反向传播算法

    1. https://www.cnblogs.com/pinard/p/6519110.html (详细原理!) 2. https://blog.csdn.net/abeldeng/article/d ...

  5. Flink中Periodic水印和Punctuated水印实现原理(源码分析)

    在用户代码中,我们设置生成水印和事件时间的方法assignTimestampsAndWatermarks()中这里有个方法的重载 我们传入的对象分为两种 AssignerWithPunctuatedW ...

  6. Codeforces 220C

    题意略. 思路: 我们可以把 bi[ i ] 在 ai[ ] 中的位置记录下来,然后算出 i - mp[ bi[i] ] ,再将它压入一个multiset.每次我们就二分地来寻找离0最近的数字来作为答 ...

  7. MSIL实用指南-this的生成

    C#关键字是非静态方法体内部,用Ldarg_0指代this例子ilGenerator.Emit(OpCodes.Ldarg_0);

  8. spss分析存在共性线后,接下来是怎么分析?

    在进行线性回归分析时,容易出现自变量(解释变量)之间彼此相关,这种情况被称作多重共线性问题. 适度的多重共线性不成问题,但当出现严重共线性问题时,可能导致分析结果不稳定,出现回归系数的符号与实际情况完 ...

  9. EAS webservice安全模式

    1.启用安全控制: isRomoteLocate=false 2.请求添加头部: <soapenv:Header> <SessionId xmlns="http://log ...

  10. P1603 斯诺登的密码-字符串加法的妙用

    传送门:https://www.luogu.org/problemnew/show/P1603 题意: 首先在给定的字符串中,找出特定的单词,把它转化成特定的数字, 然后在这些数字中,找出排列结果最小 ...