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 秒内看到 ...
随机推荐
- Extjs中,Vo对象中的属性无法在data中获取的解决方法
store.getById(data.data.id).raw.redpackid
- 409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:zphtown - [conflict] User xxx already exists
解决方法cmd执行 npm config set registry https://registry.npmjs.org/ 为什么,参考此文档:https://blog.csdn.net/adc_go ...
- mysql命令行的一些小技巧【实用:多屏显示,格式化输出等】
1.以html格式输出结果使用mysql客户端的参数–html或者-T,则所有SQL的查询结果会自动生成为html的table代码$ mysql -u root --htmlWelcome to th ...
- 从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程
从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程 用户登录与权限验证是网站不可缺少的一部分功能,asp.net MVC4框架内置了用于实现该功能的类库,只需要简单搭 ...
- php--常见算法1
<?php //递归输出123321 function digui($num){ echo $num; if($num<3){ digui($num+1); } echo $num; } ...
- 【wifi移植 3】开发板wifi自动获取IP
内核版本:3.4.61 1. 配置内核,支持DHCP ~/kernel$ make menuconfig [*] Networking support ---> Networking opti ...
- 如何使用ssh工具便于远程管理
前几天亲眼经历了Linux服务器运维过程,眼看着别人熟练运用Linux管理工具,自个心里不是滋味,所以自己特意整理了一篇“专题”:使用ssh服务远程管理主机. 首先在使用ssh服务工具之前,先熟悉下L ...
- 内置函数 lambda sorted filter map 递归
一 lambda 匿名函数 为了解决一些简单的需求而设计的一句话函数 # 计算 n 的 n次方 def func(n): return n**n print(func(10)) f = lambda ...
- IDEA利用mybatis-generator自动生成dao和mapper
pom.xml配置 <properties> <java.version>1.8</java.version> <mybatis-generator-core ...
- 卸载CUDA和cuDNN
卸载CUDA和cuDNN 1.卸载CUDA 本教程只针对对于.run方式安装的,其他的没有进行测试 打开终端,输入sudo /usr/local/cuda-10.0/bin/uninstall_cud ...