nginx部署vue项目时build配置及相关指令说明
时间:2021-07-11
本文章向大家介绍nginx部署vue项目时build配置及相关指令说明,主要包括nginx部署vue项目时build配置及相关指令说明使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue配置
注:由于项目里使用的是老版本的vue-cli
,新版本@vue/cli
配置会在旁说明。
项目config配置
老版本的配置文件在config/index.js
中,如果是cli 3.x
后续版本,需在项目 (和 package.json 同级的) 根目录中创建vue.config.js
文件进行配置。
const path = require('path');
module.exports = {
module.exports = {
build: {
// 指定生成的 index.html 的输出路径 (相对于 配置文件所在路径)。也可以是一个绝对路径。
// 新版本使用:indexPath
index: path.resolve(__dirname, '../flytree/index.html'),
// 指定生成的 资源 的输出的目录 (相对于 配置文件所在路径)。此,build后到dist目录下。注意目标目录在构建之前会被清除。
// 新版本使用:outputDir
assetsRoot: path.resolve(__dirname, '../flytree'),
// 指定除了index.html外的静态资源的目录
// 新版本使用:assetsDir
assetsSubDirectory: 'public',
// 部署应用包时的基本 URL。指定打包后,index.html里面引用资源的的相对地址。
// 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径
// 如我在index.html中应用了张在pulblic下的图片flytree.jpg
// 则引用是 src='./public/flytree.jpg'
// 新版本:publicPath
assetsPublicPath: './',
}
}
}
配置以后bulid
后,部署的文件会在项目下flytree
文件下。
路由配置
如果在ngnix
代理的时候不是配置到根路径/
的话,则要配置base
,它指定的是应用的基路径。例如,如果整个单页应用服务在 /app/
下,然后 base
就应该设为 "/app/"
。
router/index.js配置:
const vueRouter = new Router({
mode: "history",
base: "/flytree",
routes: []
})
外部文件应用配置
如配置了assetsPublicPath
路径,如这里配置的是./
相对路径,则在发布的时候要将引用的静态资源设置在,其路径里,如:
<img src="./public/img/flytree.png">
<script>
axios.get('./public/JSON/data.json')
</script>
为了方便开发和发布时使用静态资源,可以:
// main.js中配置
window.base_file_url =
process.env.NODE_ENV === 'production' ? '.' : ''
// 使用
axios.get(base_file_url + '/public/JSON/data.json')
nginx的配置
http {
include mime.types;
default_type application/octet-stream;
access_log logs/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 8023;
server_name localhost;
location /flytree {
alias F:/Program_D/work/demo/flytree/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
如此,项目就部署在http://127.0.0.1:8023/flytree
下了。
补充说明
- 关于
try_files $uri $uri/ /index.html
的说明:
Niginx中Vue Router 历史(history)模式的配置
原文地址:https://www.cnblogs.com/flytree/p/14999792.html
- ASP.NET Core的配置(3): 将配置绑定为对象[下篇]
- TensorFlow 深度学习笔记 从线性分类器到深度神经网络
- 微信版12306来了!用12306微信小程序买票靠谱吗
- 无需写try/catch,也能正常处理异常
- “人工智能毁灭人类”是一种末世恐惧传染病
- 有状态(Stateful)应用的容器化
- 实现一些字符串操作标准库函数、解决一些字符串问题
- 外卖陷阱,你入坑了么?
- ASP.NET Core的配置(4):多样性的配置来源[上篇]
- 37 个你必须知道的现代数据中心术语
- Python读书笔记7
- 2017年人工智能在游戏领域打败人类,未来我们将何去何从?
- 3杂再破市场行情 6位数结拍
- 将永久存储添加到Red Hat CDK Kit 3.0
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第012课 内存控制器与SDRAM
- 一篇文章教给你Bypass学习基础
- 第013课 S3c2440代码重定位详解
- [901]sqlite数据库的导出与导入
- 【React】730- 从 loading 的 9 种写法谈 React 业务开发
- 第014课 Jz2400_ARM异常与中断体系详解
- 作为一个程序员居然还没有属于自己的一个博客?
- 第015课 NOR Flash操作原理及裸机程序分析
- Redash 二开 - 前端环境搭建
- Verilog Task Concurrent Activation
- then, catch, finally如何影响返回的Promise实例状态
- 第016课 Nand Flash操作原理及裸机程序分析
- 第20课 SPI协议详解及裸机程序开发分析
- 第017课 LCD原理详解及裸机程序分析
- 微信小程序:一文彻底搞懂openid和unionid