关于vue-cli + webpack打包给后台,部署上线

最新推荐文章于 2024-04-02 16:24:16 发布
置顶 最新推荐文章于 2024-04-02 16:24:16 发布
阅读量174 收藏 3
点赞数
文章标签： vue打包 部署 webpack 前端打包部署 html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43617604/article/details/103353460
版权

掘金大佬分享vue 项目概述 点击跳转

关于vue-cli + webpack打包给后台,部署上线

第一：

config文件夹下的index.js 中的文件中的 assetsPublicPath ：‘./’ 改为./ 不然的话会是空白页
在这里插入图片描述

第二：

build/util.js文件下在 ‘vue-style-loader’ 之后加一行：publicPath: ‘…/…/’ 不然的话会有图片显示不出来，字体不能正常使用
在这里插入图片描述

第三：

如果你有本地json数据的话
把本地json数据中的路径全部给为根路径
在这里插入图片描述

第四：

就是本地用api代理的，上线之后就不要代理了
后续…

修改好后打开cmd运行下面的命令打包即可：

在这里插入图片描述

把打包后的dist文件夹放在服务器里,访问就能看到项目了,这样测试好了后,就可以丢后台了
前端成长营
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue-cli 打包使用history模式的后端配置实例
10-17
今天小编就为大家分享一篇vue-cli 打包使用history模式的后端配置实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue-cli + webpack 多页面实例应用
08-30
详解vue-cli + webpack 多页面实例应用 本篇文章主要介绍了使用vue-cli和webpack来构建多页面实例应用，解决了vue-cli主要用于构建单页应用的限制。通过对vue-cli的改造，可以快速搭建多页应用，并且具有良好的扩展...
详解 vue-cli 的打包配置文件代码（带注释）
最新发布
2401_84023290的博客
04-02 453
/ 插件叫做bundleAnalyzerReport，上面有几行注释，讲的是只要在打包的时候输入npm run build --report,就可以在打包的同时查看每个打包生成的js，里面的库的构成情况，方便我们进行相关的删减，比如有的库太大了，是否可以自己实现，有的库是否有必要，可否删除之类。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
vue-cli webpack 项目打包后如何运行
11-24 3170
vue-cli webpack 创建的项目打包后生成的项目如何运行 1.项目打包 运行 nom run build 项目打包 会形成一个dist文件加，里面是打包之后的东西 在这里进行一下描述 dist 整个文件夹下的东西就是要运行在服务器端的所有东西，之外的任何东西都是本地测试的，不需要部署服务器上 2.如何运行打包后的项目 以express服务器为例 安装express 创建一个文件夹，在文件...
vue+webpack打包生成可配置文件-后台服务地址
GothaM24的博客
05-21 936
前言： 我们用vue/cli + webpack 启动前端，后台服务的地址配置会写在/config/dev.env.js和/config/prod.env.js文件中，当项目打包执行build后会把这两个文件打包 需求： 最近项目规范走CI持续构建，自动化构建，一个构建结果可能用于多个环境，比如测试环境、研发环境、演示环境、生产环境等，为了保证前端包的一致性和保存打包记录，本地打黑包是不合适了，下面记录下生成可配置的serveConfig文件方法： 第一步 在/static文件夹下新建serveConfig
webpack项目部署到服务器,vue项目通过webpack插件打包后自动部署到服务器
weixin_39841825的博客
08-05 689
我们在实际开发中经常会遇到版本不停迭代，然后我们需要把webpack打包好的文件上传出到服务器，这个是比较麻烦的，今天我给大家分享一个在vue项目中通过运行npm run build 生成打包好的文件后直接上传服务器，不要我们每次都手动拷贝。这个方案的思路是我们自己写一个的webpack的插件，在打包完成的时候把生成的文件名和数据通过post请求上传服务器，服务器获取到数据和文件名，重新生成文件到...
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
08-29
以下是关于Vue2.0基于vue-cli+webpack Vuex的用法的知识点： 一、 Vue-cli和Webpack的介绍 * Vue-cli是一个基于Vue.js的项目脚手架工具，能够快速构建Vue.js项目。 * Webpack是一个JavaScript模块打包工具，能够将...
vue-admin-template:后台管理系统 vue+vue-cli+webpack+boostrap
05-14
模板基础使用方法开启终端到项目路径下npm installnpm run devPlease make sure that your node in 4.0.0 above
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。  我是通过将项目/config下的index.js的assetsPublicPath变成’./’，变成相对...
详解vue-cli + webpack 多页面实例配置优化方法
01-19
本文介绍了vue-cli + webpack 多页面实例配置优化方法，分享给大家 vue+webpack是否有多页面 目前使用vue来做项目，估计大部分都是单页面（SPA）应用，一个轻型的 MVVM 框架，谁用了MVVM框架，就再也回不去JQ时代...
前后台分离打包部署项目（热）
海角12138的博客
08-13 686
前后台分离的项目:项目演示地址：https://github.com/haijiao12138/houyuanbo.niua.git 一：前台打包部署到服务器： 改动api.js，在api.js中定义baseUrl，映射后台的请求地址；在前台vue中也要写入对应的请求头： BaseUrl中的ip地址是自己服务器的地址，后面的8080端口是映射后台的端口； 普通的前台文件中加入请求头： 前台进入easy-backend-ui>文件下使用npm run build命令打包前台文件，会..
vue项目如何打包部署到后端
bin_2659017380的博客
04-04 4040
一、项目完善之后需要注意 1）注意axios的请求代理前缀 置为‘’ // 配置代理 proxyTable: { "/api":{ target:'http://localhost:3000', changeOrigin:true,//允许 pathRewrite:{ //重写 把当前链接地址的api设置成 '' url地址上就不会出现http:/api/banner "^/ap
vue项目打包给后端遇到的问题
cpsxn的博客
03-10 2837
一、资源路径问题 （绝对路径、 相对路径） 打包上传到服务器时，前端代码不能使用绝对路径，然而默认打包后的html、js、css等文件使用的都是绝对路径，所以我们要在打包之前将绝对路径改为相对路径再打包。 首先理解两个概念： 1.什么是绝对路径 以根目录为起点到某一个目录的路径，能够**完整描述文件所在位置（在硬盘上真正的路径）**的路径就是绝对路径。 例如：c:/test/index.htm 网页中以http开头的链接都是绝对路径 2.什么是相对路径 从一个目录为起点到另外一个目录的路径 例如： …/te
Vue-cli3 + webpack搭建vue项目流程以及打包发布流程
是一座岛
04-26 5373
目录 1.命令行初始化项目 2. 分析项目目录 3. vue.config.js多环境打包配置 4. 发布项目 5.参考文章 1.命令行初始化项目 bogon:vue xudanfeng$ vue create vue-cli-project Vue CLI v3.0.2 ? Please pick a preset: Manually select features ? C...
vue-cli 快速构建vue应用，实现webpack打包
热门推荐
远走的兔子博客
05-21 2万+
一、什么是vue-clivue-cli是由vue官方发布的快速构建vue单页面的脚手架。参见vue-cli官方网站。http://vuejs-templates.github.io/webpack/之前需要使用vue的单文件组件的功能，即将不同的模板分离到不同的.vue后缀的文件中，这样做需要使用webpack打包。参见官方说明：https://cn.vuejs.org/v2/guide/sing...
前端（以Vue为例）webpack打包后dist文件包如何部署到django后台中
AlexGeek
10-07 2万+
       由于现在前端使用的三大框架配合webpack可以实现快速打包，为部署到服务端提供了非常大的便利，那么在前端打包后，应该做些什么可以部署到django的后台中呢？ 1.打包后文件包dist 进入到 dist文件包会发现是这个样子的： 2.在django项目中创建前端文件包（静态资源包，我习惯起名为frontend）         然后把dist文件包中的static文...
VUE-CLI webpack 项目打包部署上线
weixin_34082177的博客
10-28 544
很简单不复杂只需要几步1、找到项目的 webpack环境配置的config目录下的index.js文件的assetsPublicPath把"/"改成 "./"得出： build: { env: require('./prod.env'), index: path.resolve(dirname, '../dist/index.html'), ...
vue-cli3.0项目打包后修改访问后端地址
wusq的博客
10-25 7566
问题：原本是将访问后台的地址卸载代码里面，但是这样的话打包之后就不能修改了，只能在代码里面修改，然后重新打包 解决：在vue3.0之前的版本，项目目录有static不会被打包，而在vue3.0项目目录没有static文件夹，但是有public文件夹是不会被打包，所以在public目录下创建一个js文件，命名为config.js 在里面添加代码， 定义BASE_URL为要访问后台接口的...
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端成长营

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值