vue 打包部署到服务器上 配置nginx访问
坑一
css,js资源引入不正确
webpack配置文件config/index.js
需要更改:
方法一
当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径
问题描述
一般情况下,通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。
但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static
文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。
解决办法
打开webpack.prod.conf.js
找到output
:增加 publicPath: './'
, 即可,如图。
那么这样后,资源的引用路径就正确了。
当然在config文件夹下的index.js中修改 assetsPublicPath: './'
同样也可以达到资源的相对引用。
坑二
背景图片地址引入不正确
url(../../static/img/logo-index.2f00bf2.png) no-repeat
那么就需要修改build文件夹下的utils.js代码,如图所示:
添加如图所示的一行代码,这样不论是字体还是图片的引用问题都能解决。
坑三
vue路由刷新404
Nginx 配置如下:
server {
listen 80;
server_name www.xxx.com; location / {
root /data/www/;
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
vue 打包部署到服务器上 配置nginx访问的更多相关文章
- Vue 打包部署到服务器后,非主页刷新后出现404问题解决
开心把项目部署到服务上,从头到尾点了一遍,发现没有问题,以为就可以大功告成,没想到刷新页面时出现 被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以 ...
- springboot 项目打包部署后设置上传文件访问的绝对路径
1.设置绝对路径 application.properties的配置 #静态资源对外暴露的访问路径 file.staticAccessPath=/upload/** #文件上传目录(注意Linux和W ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- vue之项目打包部署到服务器
这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...
- [亲测]ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问
前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...
- [亲测]七步学会ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问
前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...
- ASP.NET Core 2.0发布/部署到Ubuntu服务器并配置Nginx反向代理
原文链接https://www.linuxidc.com/Linux/2017-12/149557.htm ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用AS ...
- 在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境 项目运行环境 阿里云(单核CPU, 1G内存, Ubuntu 14.04 x64 带宽1Mbps), 具体购买和ssh连接阿 ...
- 服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的
前言 本文讲解的是:做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将 node+mongodb 项目部署在阿里云 centos 7.3 的服务器上,并进行性能优化,达到页面 1 秒内看到 ...
随机推荐
- win DLL 笔记
DLL 头文件: #ifdef DLL_API #else #define DLL 导出类 class DLL_API point { public: void aaa() { } } 导出类中函数 ...
- go之环境安装
1)Linux安装 https://studygolang.com/dl # 在 ~ 下创建 go 文件夹,并进入 go 文件夹 mkdir ~/go && cd ~/go 下载的 g ...
- day1-css练习[新浪首页顶部栏]
直接贴代码吧: html代码 <div class="border-01"> <div class="border-001"> < ...
- Win10带有网络连接的安全模式怎么开启?
安全模式是在Windows系统中不加载第三方设备驱动程序的情况下启动电脑,从而可以方便的检测与修复电脑系统的错误,比如在安全模式下可以删除某些顽固的文件.查杀病毒.修复系统故障.卸载恶意软件等.不过在 ...
- conda创建和使用python的虚拟环境
https://uoa-eresearch.github.io/eresearch-cookbook/recipe/2014/11/20/conda/ 当我们使用服务器的时候,会存在多个用户,并且可能 ...
- 【转】Linux设置和查看环境变量的方法
转: http://www.jb51.net/LINUXjishu/77524.html 1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量 ...
- deep_learning_Function_list变量前面加星号,字典变量前面加两个星号
列表前面加星号作用是将列表解开成两个独立的参数,传入函数, 字典前面加两个星号,是将字典解开成独立的元素作为形参. def add(a, b): return a+b data = [4,3] pri ...
- 关于STM32运行时程序卡在B.处的解决方法
文章转载自:https://blog.csdn.net/u014470361/article/details/78780444 背景: 程序运行时,发现程序卡死在B.处. 解决方法: 程序卡死在B.处 ...
- 亲测,将自己的项目部署到Github下
转载内容,其实就是为了方便自己不用再去百度 感谢这位前辈 链接
- Android 计算器制作 1.布局
1.activity_main.xml文件布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr ...