vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容
vue.config.js
module.exports = {
publicPath: './',//打包后的位置(如果不设置这个静态资源会报404)
outputDir: 'dist',//打包后的目录名称
assetsDir: 'static'//静态资源目录名称
}
router.js
export default new Router({
mode: 'history',//配合nginx本地才能正常的使用history模式
base: process.env.BASE_URL
})
配置nginx(小白入门配置教程)
nginx.conf
server {
listen 8888;//监听端口
server_name localhost;
location / {
try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由
root D:\documents\study\Vuejs\epadmin\dist;#打包后的dist根目录
autoindex on; #开启nginx目录浏览功能
autoindex_exact_size off; #文件大小从KB开始显示
charset utf-8; #显示中文
add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
tips: 配置完nginx记得使用命令重载配置
nginx -s reload
以上都配置完成后 运行打包项目命令
npm run build
打包后的目录结构
浏览器输入 http://localhost:8888 即可正常访问到打包后的资源
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目的更多相关文章
- SprimgMVC学习笔记(十一)—— 解决静态资源无法被springmvc处理
方法一:在springmvc.xml中配置 <!-- 解决静态资源无法被springMVC处理的问题 --> <mvc:default-servlet-handler /> 方 ...
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...
- 关于web项目中静态资源加载不了的一些解决思路
问题的产生: <!--springMVC前端控制器加载--> <servlet> <servlet-name>springmvc</servlet-name& ...
- vue路由history模式下打包node服务器配置
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- [bug] IDEA springboot项目 访问静态资源 html页面 报404
原因 复制的静态资源目录没有编译 解决 检查target目录中,是否有static目录,若没有,重新右键项目install即可 若还不能解决,尝试浏览器缓存和IDEA编译设置,详见参考链接 参考 ht ...
- SpringBoot 2.x 自定义拦截器并解决静态资源访问被拦截问题
自定义拦截器 /** * UserSecurityInterceptor * Created with IntelliJ IDEA. * Author: yangyongkang * Date: ...
- vue history模式下出现空白页情况
问题描述: vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...
随机推荐
- [NOIP2019模拟赛]HC1147 时空阵
题目描述: 幽香这几天学习了魔法,准备建造一个大型的时空传送阵. 幽香现在可以在幻想乡的n个地点建造一些传送门,如果她建造了从地点a与地点b之间的传送门,那么从a到b和从b到a都只需要单位1的时间. ...
- 迭代器/生成器/装饰器 /Json & pickle 数据序列化
本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...
- soj98 卡牌
题意:一共有n张牌,每张牌有三个属性ai,bi,ci.问在属性上限为A,B,C的所有牌中有多少张牌满足至少有两个属性可以完全压制(严格大于)那n张牌? n<=50W. 标程: #include& ...
- 2016.9.24初中部上午NOIP普及组比赛总结
2016.9.24初中部上午NOIP普及组比赛总结 2016.09.24[初中部 NOIP普及组 ]模拟赛 其实这次我没比赛,早上去参加亲子活动去了. 不过在下午我做完了所有的题,感觉还好. 进度 现 ...
- 学习笔记css3
边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...
- 第十章 Odoo 12开发之后台视图 - 设计用户界面
本文将学习如何为用户创建图形化界面来与图书应用交互.我们将了解不同视图类型和小组件(widgets)之间的差别,以及如何使用它们来提供更优的用户体验. 本文主要内容有: 菜单项 窗口操作(Window ...
- bzoj1913: [Apio2010]signaling 信号覆盖
传送门 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #includ ...
- 2019牛客暑期多校赛(第三场)B-求01串中的最长01数量相等的子串和子序列
https://ac.nowcoder.com/acm/contest/883/B 首先先把0所在的位置变-1,1所在位置变1,然后统计一个前缀和,用sum[i]表示. 那么如果从起点开始的话只要满足 ...
- 使用xshell远程连接到linux
1.检查是否安装ssh rpm -qa | grep ssh 已安装是这样 如果没有安装,则 yum install openssh* #命令安装 2.开启ssh服务 [root@localhos ...
- SpringIOC注入模块中xml文件导入其他xml文件配置
如果我们在spring框架中配置了多个xml文件,我们可以在读取配置文件的时候把这些xml文件一下全都读取 也可以只读一个总的xml文件,在这个总的xml文件中把其他的xml全都都导入进来. 例如: ...