默认端口号是多少: 80
构建项目运行的命令package.json的
每次运行，就会在在项目的根目录生成一个dist文件，如果原来有，就删除重新创建
本地模拟上线/测试
使用nginx模拟生产环境
是一个高性能的HTTP和反向代理web服务器
注意 nginx在自己电脑的时候所在的路径不能用中文
2.修改了配置文件（nginx.conf）一定要重启nginx
3.不要去双击好多次，任务管理器查看只要有两个nginx就行。结束nginx的时候，右键先结束下面哪个（子进程，再结束上面的主进程）
在这个nginx文件目前我们只用两个文件
nginx-1.17.6\conf\nginx.conf 文件： 对nginx服务器进行配置的
nginx-1.17.6\logs\error.log 当我们的nginx启动报错的时候，可以到这里来查看错误
首先我们看配置文件：配置文件中的注释都是#
项目部署在根目录
server {
listen 8887; #监听的端口号
server_name localhost; #访问的地址
location / { #访问这个服务器根目录
root html; #访问项目的路径
index index.html index.htm; #访问路径下面的那一个文件
try_files $uri $uri/ /index.html break;
}
}
双击/命令行 运行nginx.exe文件
打开任务管理器，查看这个文件是否存在证明启动成功
然后根据上面的配置访问 http://localhost:8887 它就会加载html文件夹里面的内容 我们只要把打包构建之后的dist目录里面的项目拷贝到这个下面 这个地址就能访问了
项目部署在子目录/子应用
server {
listen 8887; #监听的端口号
server_name localhost; #访问的地址
location /suming { #访问服务器的根目录下面的/suming文件夹下面的项目子目录
#root "E:/1711A/newnear_pro/dist"; #访问的根路径
#root "E:/1907A/bwonline/dist"; #访问的根路径
root html;
index index.html index.htm; #根路径下面的首页叫什么
try_files $uri $uri/ /suming/index.html;
}
}
1,在nginx的配置里面.下面的try_files 指向的根文件路径要加上子目录的路径/suming
2在项目的webpack配置(vue.config.js)里面,添加上打包到根目录的配置
3.在路由文件夹下面添加一个base
const router = new VueRouter({
mode: 'history',
base: '/suming', //Vue是从nginx的根目录开始查找组件导致的。所以需要修改路由的查找起点
// base: process.env.BASE_URL,
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production' ? '/suming' : '/',
})
4：在nginx的根目录下面新建一个子应用文件夹 或者是添加一个webpack配置
上传服务器
把我们的项目上传到服务器 需要一个搬运工具 :FileZilla (同等作用的工具还有FTP XShell ssh pwoershell ,只需要你们记住fileZilla就行)
公司还要告诉你,你的项目要上传到哪个位置:
在我服务器 /www/wwwroot/www.lovetang.top/CRMEB-master/crmeb/public
当然也可以通过命令行链接服务器(不推荐)
sftp [email protected] 输入密码时看不见输入的,是因为linux的一种自我保护机制,就是看不见
在项目上线过程中遇到的问题:
1.我们公司是history模式.在项目上线的时候,刷新会报404的错误.当时我是从网上找了一个解决方式,对nginx进行配置try_files,实际上,就相当于时让页面刷新的时候,重定向到根页面,解析路由表,而不是当成文件夹来解析
路由分为两种模式hash 和history. 其中history上线才会报404
标签：index,上线,访问,部署,suming,nginx,html,根目录,打包 From： https://www.cnblogs.com/z-bky/p/17031349.html