webpack +vue+ngnix打包

最新推荐文章于 2024-05-17 12:58:20 发布
最新推荐文章于 2024-05-17 12:58:20 发布
阅读量712 收藏
点赞数
分类专栏： vue 文章标签： webpack打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33386381/article/details/79525620
版权

在开发环境开发完项目之后需要打包

在ngnix下的打包程序如下

1：在项目中个打开命令行 npm run build 会生成一个dist文件夹 把该文件放在自己项目的服务器之下的www文件夹下

2：在ngnix的ngnix。config中找到server 做如下配置


然后在服务器打开情况下在浏览器中输入自己配置的域名即可（域名在c-windows-systems32-drivers-etc-hosts）


打开：http://wangyan.com


qq_33386381
关注
专栏目录
Vue + Nginx 项目部署 （亲测有效）
蜂窝码农的博客
03-25 8860
前言 笔者最近初学Vue，编写前端项目。写好一个简单项目后发现，项目不能简单通过Nginx做反向代理并被其他人访问。举例，本地启动vue项目，然后在Nginx里配置 nginx.conf worker_processes 2; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile
node.js+npm+vue+webpack+nginx前端项目打包部署到服务器
小成一撇的博客
08-20 4949
本文主要介绍vue+webpack打包部署到nginx服务器。因为可以需要依赖node.js,所有需要先安装node.js,步骤如下 1.首先先去下载node.js,点击查看下载安装步骤http://www.cnblogs.com/wuac/p/6381819.html，本主要介绍在window下的操作，所以别忘了将node.js和npm加入到环境变量下。npm是我们要用到的包管理工具，一会vu...
VUE+ ngnix代理
u011739062的博客
07-12 214
listen 8082; server_name 3a.xxx.com; location /api/ { proxy_pass http://localhost:9090/; } location / { roo...
利用webpack打包工具，打包前端项目，部署到装了bt和nginx的服务器上
qq_66450373的博客
03-17 1138
前端，webpack打包，nginx部署
vue+Nginx部署
zzq的博客
09-19 3724
1，新建一个Vue项目，这里是vue-cli3的脚手架。 2，打包项目：npm run build 3，项目就多了一个文件夹：dist 项目结构如图所示： 4，查看路由 一会部署成功后，我们使用 /about 这个路由来测试，能正确访问表示就成功。 5，配置Nginx 找到nginx.conf这个文件 修改如下： 这是单机版的Nginx，我们只需要做如下修改：...
vue webpack 配合nginx实现浏览器刷新不报错
qq_24882601的博客
07-22 251
前提：之前用webpack写项目，因为是在微信公众号上，所以也就没有在意那难看的 “#” 路由，但是最近在做web端的项目，有了那个“#” 就实在是太丑了，所以就改成history模式，但是真的遇到好多的问题，下面就一一说明。 首先vue端，要实现无“#”号，要在路由里面加上 mode:‘history’ 在nginx配置端要加上 locat...
vue多页面开发和打包正确处理方法
12-11
前段时间做项目，技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况，分析出三种方案 一个项目代码里面嵌两个spa应用(官网和后台系统) 分开两套项目源码 一套项目源码里面就一个spa应用 思考： ...
vue-cli webpack模板 Vue项目本地开发 nodejs反向代理 及与nginx反向代理的区别
qq_24790575的博客
03-29 900
1.vue本地项目node.js 反向代理 配置config文件夹下的index.js文件 配置见上图，target是后台电脑请求ip地址及端口，/weixinapi是标识符，当检测到请求路径里的/weixinapi的时候target将代替这个标识符之前的内容， 访问地址：http://localhost:8080 浏览器显示路径 http://localhost:8080/weixinapi/...
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
这个设置会影响Webpack打包时静态资源的引用路径。修改如下： ```javascript module.exports = { // ... build: { assetsPublicPath: '/admin/', // ... } } ``` 完成Vue项目的内部配置后，我们需要配置NGINX...
Vue项目在Windows系统打包部署到Nginx服务器的两种方式
腾云驾雾的猿
08-26 2191
Vue项目打包部署到Nginx服务器的两种方式
Vue项目部署到Nginx服务器
最新发布
极限突破者的博客
05-17 2647
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
Vue——利用开发环境ngnix整合springboot （五）
xiaonuolen
05-29 266
创建springboot 这块就不多说了，用了简单的数据模拟了下 @CrossOrigin @ResponseBody @RequestMapping(value = "/test") public JSONObject test1(){ JSONArray jsonArray = new JSONArray(); List<Integer> list = new...
VUE项目部署（Nginx+VUE）
RisoKome的博客
09-09 421
一、Nginx安装 1、下载Nginx 建议选择稳定版下载 http://nginx.org/en/download.html 2、解压安装 tar -zxvf nginx-1.20.1.tar.gz -C /usr/local local这个目录类似于Windows的program目录，所以一些软件可以都安装在这里 3、下载依赖库 yum install pcre yum install pcre-devel yum install zlib yum install zlib-devel 4、进行
vue+webpack+nginx实践
weixin_29129287的博客
05-31 1014
一、建立一个webpack项目 $ cd /Users/tangxuefeng/nbtang_vue $ vue init webpack vue004 $ cd vue004 $ pwd /Users/tangxuefeng/nbtang_vue/vue004 $ cd ~/nbtang_vue/vue004 $ cnpm run dev 效果 添加bootstrap $ cd ~...
高仿饿了么vuejs【node+webpack】（centos +nginx下部署）
tt_best的博客
12-05 273
其实跟window差不多，上传dist下的文件，我是直接把项目传上去的，然后在项目里进行如下命令的 安装node：rpm -ivh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm 参考链接：https://blog.csdn.net/tanga842428/article/detai...
VUE部署至Nginx
qq_42588821的博客
12-22 2796
vue项目生成后部署到nginx
Vue+Nginx 部署
weixin_41643257的博客
01-12 935
Vue脚手架的搭建 安装nodejs brew install nodejs 安装成功之后，查看nodejs版本 node -v 安装国内淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack包 cnpm install webpack -g 安装Vue脚手架 cnpm install vue-cli -g ...
小白Vue3+Nginx实现部署
热门推荐
Sumuxi9797926的博客
12-09 1万+
记录一下自己想搭建一个自己的个人网站的心路历程，其实我刚开始的落脚点是找一个别人的半成品或者成品，再慢慢的改，想把主要的精力放在后台上面，找了很多网站之后，例如,，不是项目很久没有维护了，就是好看的没有适合我的🙃（怪我，太菜了~傻狗哽咽🐮🐴），最后还是决定用vue3自己从0开始学，开始搭建。
Vue-router+webpack单页项目服务器部署(nginx)
g1531997389的博客
01-24 3885
部署项目目录结构如下:1.首先修改config文件夹下的index.js 配置文件,将文件内的assetsPublicPath: '/'修改为 assetsPublicPath: './'2.在router文件夹下的index.js路由配置中加上:mode: 'history', // 路由模式,此处为history模式,需修改nginx配置文件base: '/',　// 路由基目录3.命令行执行...
webpack + vue 打包后本地运行网页空白
06-08
如果你使用 webpack + vue 打包后本地运行网页空白，可能是因为打包后的文件路径不正确，导致页面无法正确加载。 你可以尝试以下几个解决方案： 1. 检查打包后的文件路径是否正确，确保所有的文件都被正确地打包到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值