nginx下部署vue项目的方法步骤

首先要去nginx官网下下载nginx:

下载地址:https://nginx.org/en/download.html

下载下来会是一个解压包,解压到你想放的文件夹下

 

运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了:

这里写图片描述

然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf

点击进去然后找到一个nginx.conf的文件

然后把它用编辑器的方式打开,打开之后找到这里的sever的listen就是你的端口号,默认的是80端口,你可以根据自己没有被占用的端口进行改写,改写完成之后保存然后打开你的localhost:你改写的端口号就OK了

1

2

3

4

5

6

7

8

9

10

11

12

server {

     listen    8088;

     server_name localhost;

 

     #charset koi8-r;

 

     #access_log logs/host.access.log main;

 

     location / {

       root  html;

       index index.html index.htm;

   }

这里写图片描述

上面是安装配置nginx服务器的方法,下面就是如何把自己的vue项目部署到你所安装配置的nginx服务器上的步骤了:

首先找到自己的vue的项目然后输入命令 npm run build 他会在你的vue目录下生成一个dist文件夹里面就是你的vue的项目

这里写图片描述

然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹

这里写图片描述

把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留,然后把你刚刚复制的文件粘贴进去

然后打开浏览器输入最开始改的端口号localhost:你所改的端口号回车;你就会看到自己的vue的项目跑起来了我的打开就是这样的咯:

这里写图片描述

打包和部署项目出现的问题

1.vue文件打包之后发现路径报错,检查了index文件之后发现js和css的路径为这样,发现static前面多了一个斜杠,所以导致路径错误…

<script type=text/javascript src=/static/js/app.f8d4e6b6692427d014f5.js>

解决方案::直接修改vue项目中的vue.config.js文件,将基本路径设置为相对路径
module.exports = {
// 基本路径
publicPath:"./", // 可以设置成相对路径,这样所有的资源都会被链接为相对路径,打出来的包可以被部署在任意路径
outputDir:“dist”, //打包时生成的生产环境构建文件的目录
assetsDir: ‘static’, // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
。。。
}

 2.vue-cli3项目中,配置vue.config.js解决打包以后页面空白问题打开console控制台,结果是文件的路径引入错误

解决方案:

(1)根目录下新建vue-config-js

我们简单一些,不写其他配置项

module.exports = {

publicPath: "./"

}

(2)修改route配置

将router/index.js中的mode: "history",注释掉,这样,默认就使用的hash模式了

记住修改配置项,一定要重新启动或者打包

再次打包,解决

在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值