当前位置: 首页 > Web前端 > vue.js

Nginx部署Vue(ubuntu环境下)

时间:2023-03-31 19:50:59 vue.js

下面开始爬坑的全程#Linux下安装,安装完成后使用nginx-v查看,如果输出nginx版本信息说明安装成功成功sudoapt-getinstallnginx#start直接访问http://服务器ip或者http://域名就可以看到nginx服务器的默认页面了。servicenginxstart输入命令sudo-i将当前用户切换为root用户。ps-ef|grepnginx查看Nginx进程nginx-sreload推荐重新加载nginx配置看英文HowToConfigureNginx1.sites-available是存放当前服务器配置,在这里修改。2.sites-enabled是激活使用的服务器配置(从sites_available文件创建快捷方式到sites-enabled)3.一般修改sites-available中的服务器配置,然后ln-s/etc/ngix/sites-available/xx/etc/nginx/sites-enabled/xx建立文件软连接。nginx-sreload会完成reload配置,完成真正的映射。nginx官方入门文档1.提供静态内容2.搭建一个简单的代理服务器尝试一个简单的服务器来提供静态内容①。在/home/xxxx/www目录下放置一个index.html文件②。修改站点可用内容中的默认文件。命令:vim/etc/nginx/sites-available/default③。修改如下:server{...root/home/xxxx/www;#修改这部分即可,个人建议放在用户名目录下,防止因为权限问题限制导致的一系列权限。...位置/{}}④。完成sudonginx-sreloadVue项目包并同步文件到ubuntu服务器①。同步服务器命令(学习):scp[可选参数]file_sourcefile_targetscp-rdist/*root@117.78.4.26:/www#例子:-r是递归的dist文件拷贝,dist包文件里面有很多文件②。向package.json脚本③添加推送命令。访问看到熟悉的界面非域名根路径发布有时在同一个服务器的同一个端口下,可能会根据目录划分出多个不同的项目。比如我们要将项目部署到http://xxx.com/test,这样访问http://xxx.com/test就是项目的首页的Nginx配置只需要添加一个位置规则,分配访问路径并指定访问文件夹。我们可以将/test指向之前创建的/www文件夹。因为文件夹名称和访问路径不一致,我们需要使用别名配置。这里的/test配置要放在/之前,也就是说路由进入的时候会优先匹配/test。如果根路径/下的项目有子路由/test,那么http://xxxx/test只会访问/www中的项目,不会访问子路由的webpack配置为了解决问题打包后资源路径不正确,需要在vue.config.js中配置publicPath。这里有两种配置方法。将publicPath分别配置为./和/test。publicPath配置为./,打包后的资源引用路径为相对路径。publicPath配置为/test,打包后资源的相对路径为从域名根目录开始的绝对路径。的静态资源是不会被webpack处理的,我们需要通过绝对路径来引用。当项目部署到非域名根路径时,这是很麻烦的;比较麻烦的问题是在组件样式部分使用public文件夹下的静态资源。关于静态资源的问题,vue-cli的推荐(学习)是尽量将资源作为你的模块依赖图的一部分导入(也就是放在assets中,使用相对路径引用),这样可以避免这个问题并带来其他好处:以历史模式部署!学习①.mode配置为'history',如果部署到非域名根目录,publicPath必须使用绝对路径/test的配置形式,不能使用相对路径./②。要想玩好这个模式,还需要后台配置支持。因为我们的应用是单页客户端应用,如果后台没有配置好,当用户在浏览器中直接访问http://xxxxx.com/test/id这个具体的路由地址时,会返回404,这不好。所以,你需要在服务器端添加一个涵盖所有情况的候选资源:如果URL没有匹配到任何静态资源,它应该返回相同的index.html页面,也就是你的应用所依赖的页面。③.nginxlocation/test{别名/home/marhoo_ubuntu2/www;try_files$uri$uri//index.html;#这个配置的意思是,获取一个地址,先根据地址尝试找到对应的文件,如果找不到,再测试地址对应的文件夹,返回/test/index.html如果你找不到它}