问题:ngnix将8080转成80对外访问,找不对woff2等文件

一\ 搭建环境

ngnix-->conf中
server {
listen 80;
server_name 10.9.240.9; location / {
proxy_pass http://localhost:8080;
}
}   

二\解决办法

https://github.com/vuejs/vue-cli/issues/179
style-loder 无法自己设置publicpath, 所以只能在ExtractTextPlugin后的css目录路径 和 webpack.base.conf做文章的,
解決的办法有两个, 一个在办法是在webpack.base.conf 里设置assetsPublicPath:'/' 根目录,assetsSubDirectory: './在服务器中的相对路径/static',
config/index.js
assetsSubDirectory: 'AbsolutePath/projectPath/static',
assetsPublicPath: '/',
还有一个是在ExtractTextPlugin,css目录路径,把脱离出来的css路径裸在项目路径,在webpack.prod.conf中设置,
// 不需要提到static/css 中
//new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
new ExtractTextPlugin('[name].[contenthash].css'),
config/index.js assetsSubDirectory: 'static',
assetsPublicPath: './',
两种方法都可以解决css 中img问题,
在知道项目的绝对路径可以用一方法,
不知道项目的绝对路径可以用二方法,(只是css文件裸在youproject中)^-^

三\实际操作 

原因说明:这样的话,编译的index.html中的引用就是通过相对路径来引用的,如果写成10.9.111.111 就是绝对路径来引用的

atzhang

Vue项目发布的问题--http://localhost:8088/static/fonts/fontawesome-webfont.af7ae50.woff2的更多相关文章

  1. vue项目发布后带路径打开页面报404问题

    环境: 后端,python+uwsgi启动 前端:vue  用nginx运行,指定静态目录 问题 :发布后带路径打开页面报404问题,带路径打开即不是打开的主页 解决方案: https://route ...

  2. vue项目发布时去除console语句

    在vue.config.js中添加下面的代码即可 // vue-cli version > 3 modeule.exports = { configureWebpack: config => ...

  3. vue项目发布后,线上运行时刷新404

    修改nginx配置文件 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } (参考官网 ...

  4. vue项目 构建 打包 发布 三部曲

    一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...

  5. `vue-router`的`History`模式下的项目发布

    背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...

  6. (转)tomcat 修改默认访问项目名称和项目发布路径

    1.项目发布路径 <Host name="localhost" appBase="webapps" unpackWARs="true" ...

  7. 在vue项目中通过iframe引入jquery项目

    最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...

  8. 在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  9. 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...

随机推荐

  1. DDD实战课(实战篇)--学习笔记

    目录 DDD实践:如何用DDD重构中台业务模型? 领域建模:如何用事件风暴构建领域模型? 代码模型(上):如何使用DDD设计微服务代码模型? 代码模型(下):如何保证领域模型与代码模型的一致性? 边界 ...

  2. 一个线上 Maven 诡异问题排查过程

    å. 前言 现在的大部分 Java 应用基本都是通过 Maven 进行组织的,不论是分布式应用还是单体集群应用往往都会通过一个 父 POM 加若干子 POM 完成项目的组织.然而这种多应用多模块的拆分 ...

  3. K8s 部署 Prometheus + Grafana

    一.简介 1. Prometheus 一款开源的监控&报警&时间序列数据库的组合,起始是由 SoundCloud 公司开发的 基本原理是通过 HTTP 协议周期性抓取被监控组件的状态, ...

  4. React 并发功能体验-前端的并发模式已经到来。

    React 是一个开源 JavaScript 库,开发人员使用它来创建基于 Web 和移动的应用程序,并且支持构建交互式用户界面和 UI 组件.React 是由 Facebook 软件工程师 Jord ...

  5. JWT理论知识

    JWT学习文章: 第一篇:JWT原理 第二篇:JWT原理实现代码 简介 JWT全拼是JSON Web Tocken,是目前最流行的跨域身份认证解决方案,特别适合分布式系统,减少用户麻烦,保证账号安全, ...

  6. ABP Framework V4.4 RC 新增功能介绍

    目录 新增功能概述 启动模板删除 EntityFrameworkCore.DbMigrations 项目 CMS-Kit 动态菜单管理 Razor引擎对文本模板的支持 DbContext/Entiti ...

  7. 18.自动运维工具ansible

    1 Ansible 介绍和架构 1.1 Ansible介绍 ansible 的名称来自科幻小说<安德的游戏>中跨越时空的即时通信工具,使用它可以在相距数光年的 距离,远程实时控制前线的舰队 ...

  8. Java程序设计(2021春)——第二章笔记与思考

    Java程序设计(2021春)--第二章笔记与思考 本章概览: 面向对象方法的特征 抽象:从同类型对象中抽象出共同属性 封装:把数据和处理数据的方法封到一个类中 继承:在已有的类的基础上开发新的类 多 ...

  9. 深入理解 Go Map

    文章参考:Go语言设计与实现3.3 哈希表 哈希表的意义不言而喻,它能提供 O(1) 复杂度的读写性能,所以主流编程语言中都内置有哈希表. 哈希表的关键在于哈希函数, 好的哈希函数能减少哈希碰撞,提供 ...

  10. CSS水平居中与垂直居中的方法

    一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...