问题: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. (鸡汤文)这一次我终于搞懂了 JavaScript 定时器的 this 指向!

    开篇语 忽然有一种感觉,每次学习一个知识点就像是谈一场恋爱:从初次邂逅,到彼此了解,一切都那么的符合恋爱的过程! 如果这个知识点再有点"调皮"的话,那简直是让人欲仙欲死而又不可自拔 ...

  2. 【模板】map入门

    map 在数据特别庞大,数组已经满足不了的某些情况下codevs p1230,可以用上map; 我们可以将map容器作为一个有序的映射表,看作为一个下表可以是任意类型的数组: map是一个红黑树,单次 ...

  3. Golang学习(用代码来学习) - 第四篇

    /** 一个用来进行go routine的函数 */ func print_something(msg string){ for i:= 0;i < 5;i++{ time.Sleep(1 * ...

  4. 一文带你走遍Git世界,教会你Git的使用

    @ 目录 这篇文章教会Git 1. Git是什么? 1.1 发展历程 1.2 Git是什么? 1.3 Git和SVN 2.Git有什么用? 2.1 代码合并 2.2 代码备份 2.3 代码还原 2.4 ...

  5. 解决“与 Microsoft Exchange 的连接不可用,Outlook 必须联机或已连接才能完成此操作”

    Microsoft Outlook 是一种用于发送和接收电子邮件的应用程序.由于其可靠性和各种使用类型,它在企业公司中非常受欢迎.Outlook 还可用于管理各种类型的个人数据,如日历约会.联系人.邮 ...

  6. oracle行转列实现

    1.新建测试表 create table TEST_TABLE( T1 VARCHAR2(10),--姓名 T2 VARCHAR2(10),--科目 T3 VARCHAR2(10)--成绩 ) 2.插 ...

  7. 寻找无序数组中的前k大元素

    题目描述 以尽可能小的代价返回某无序系列中的两个最大值,当有重复的时设置某种机制进行选择. 题解 首先要考虑的是重复的数的问题. A.不处理重复数据方法:在处理第k大的元素时不处理重复的数据,也就是将 ...

  8. 【转载】Nginx多服务绑定80端口及映射域名

    多服务绑定80端口及映射域名 说明:业务需要配置的样例模板,如需深入了解,请查看官方文档 1.Nginx配置文件nginx.conf(可拆分多台机器部署) worker_processes  1; e ...

  9. 2012年第三届蓝桥杯C/C++程序设计本科B组省赛 密码发生器

    密码发生器 题目描述: ```bash 在对银行账户等重要权限设置密码的时候,我们常常遇到这样的烦恼:如果为了好记用生日吧,容易被破解,不安全:如果设置不好记的密码,又担心自己也会忘记:如果写在纸上, ...

  10. oracle 大表在线删除列操作(alter table table_name set unused )

    在某些情况下业务建的表某些列没有用到,需要进行删除,但是如果是数据量很大的大表,直接 alter table table_name drop column column_name;这种方法删除,那么将 ...