坑一

css,js资源引入不正确

webpack配置文件config/index.js

需要更改:

方法一

当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径

问题描述

一般情况下,通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。

但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。

解决办法

打开webpack.prod.conf.js

找到output增加 publicPath: './', 即可,如图。

那么这样后,资源的引用路径就正确了。

当然在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用。

坑二

背景图片地址引入不正确

  上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了  url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:
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访问的更多相关文章

  1. Vue 打包部署到服务器后,非主页刷新后出现404问题解决

    开心把项目部署到服务上,从头到尾点了一遍,发现没有问题,以为就可以大功告成,没想到刷新页面时出现 被破泼了一脸的凉水,更奇怪的事首页没有问题,只有其他页面出现,在调戏了很久的度娘后,才从坑里跳出来,以 ...

  2. springboot 项目打包部署后设置上传文件访问的绝对路径

    1.设置绝对路径 application.properties的配置 #静态资源对外暴露的访问路径 file.staticAccessPath=/upload/** #文件上传目录(注意Linux和W ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

  5. [亲测]ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问

    前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...

  6. [亲测]七步学会ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问

    前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...

  7. ASP.NET Core 2.0发布/部署到Ubuntu服务器并配置Nginx反向代理

    原文链接https://www.linuxidc.com/Linux/2017-12/149557.htm ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用AS ...

  8. 在阿里云服务器上配置CentOS+Nginx+Python+Flask环境

    在阿里云服务器上配置CentOS+Nginx+Python+Flask环境 项目运行环境 阿里云(单核CPU, 1G内存, Ubuntu 14.04 x64 带宽1Mbps), 具体购买和ssh连接阿 ...

  9. 服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的

    前言 本文讲解的是:做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将 node+mongodb 项目部署在阿里云 centos 7.3 的服务器上,并进行性能优化,达到页面 1 秒内看到 ...

随机推荐

  1. win DLL 笔记

    DLL 头文件: #ifdef DLL_API #else #define DLL 导出类 class DLL_API point { public: void aaa() { } } 导出类中函数 ...

  2. go之环境安装

    1)Linux安装 https://studygolang.com/dl # 在 ~ 下创建 go 文件夹,并进入 go 文件夹 mkdir ~/go && cd ~/go 下载的 g ...

  3. day1-css练习[新浪首页顶部栏]

    直接贴代码吧: html代码 <div class="border-01"> <div class="border-001"> < ...

  4. Win10带有网络连接的安全模式怎么开启?

    安全模式是在Windows系统中不加载第三方设备驱动程序的情况下启动电脑,从而可以方便的检测与修复电脑系统的错误,比如在安全模式下可以删除某些顽固的文件.查杀病毒.修复系统故障.卸载恶意软件等.不过在 ...

  5. conda创建和使用python的虚拟环境

    https://uoa-eresearch.github.io/eresearch-cookbook/recipe/2014/11/20/conda/ 当我们使用服务器的时候,会存在多个用户,并且可能 ...

  6. 【转】Linux设置和查看环境变量的方法

    转: http://www.jb51.net/LINUXjishu/77524.html 1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量 ...

  7. deep_learning_Function_list变量前面加星号,字典变量前面加两个星号

    列表前面加星号作用是将列表解开成两个独立的参数,传入函数, 字典前面加两个星号,是将字典解开成独立的元素作为形参. def add(a, b): return a+b data = [4,3] pri ...

  8. 关于STM32运行时程序卡在B.处的解决方法

    文章转载自:https://blog.csdn.net/u014470361/article/details/78780444 背景: 程序运行时,发现程序卡死在B.处. 解决方法: 程序卡死在B.处 ...

  9. 亲测,将自己的项目部署到Github下

    转载内容,其实就是为了方便自己不用再去百度 感谢这位前辈 链接

  10. Android 计算器制作 1.布局

    1.activity_main.xml文件布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr ...