怎么把VUE项目部署到服务器上面

怎么把VUE项目部署到服务器上面,第1张

1.使用xshell登录到阿里云服务器。安装nginx(本文安装到/etc下)

[plain] view plain copy

cd /etc  

apt-get update  

apt-get install nginx  

2.首先先配置nginx,然后再根据配置文件做下一步操作

打开/etc/nginx/nginx.conf文件

[plain] view plain copy

vim /etc/nginx/nginx.conf  

在nginx.conf中配置如下:

[plain] view plain copy

user www-data  

worker_processes auto  

pid /run/nginx.pid  

events {  

        worker_connections 768  

        # multi_accept on  

}  

http {  

  

        ##  

        # Basic Settings  

        ##  

  

        tcp_nodelay on  

        keepalive_timeout 65  

        types_hash_max_size 2048  

        # server_tokens off  

  

        # server_names_hash_bucket_size 64  

        # server_name_in_redirect off  

  

        include /etc/nginx/mime.types  

        default_type application/octet-stream  

  

        ##  

        # SSL Settings  

        ##  

  

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 # Dropping SSLv3, ref: POODLE  

        ssl_prefer_server_ciphers on  

  

        ##  

        # Logging Settings  

        ##  

  

        access_log /var/log/nginx/access.log  

        error_log /var/log/nginx/error.log  

  

        ##  

        # Gzip Settings  

        ##  

  

        gzip on  

        gzip_disable "msie6"  

  

        # gzip_vary on  

        # gzip_proxied any  

        # gzip_comp_level 6  

        # gzip_buffers 16 8k  

        # gzip_http_version 1.1  

  

        ##  

        # Virtual Host Configs  

        ##  

  

  

        gzip on  

        gzip_disable "msie6"  

  

        # gzip_vary on  

        # gzip_proxied any  

        # gzip_comp_level 6  

        # gzip_buffers 16 8k  

        # gzip_http_version 1.1  

        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript  

  

        ##  

        # Virtual Host Configs  

        ##  

  

        include /etc/nginx/conf.d/*.conf  

        include /etc/nginx/sites-enabled/*  

        #以下为我们添加的内容  

       server {               

              listen 80  

              server_name your-ipaddress  

  

              root /home/my-project/  

              index index.html  

              location /datas {  

              rewrite ^.+datas/?(.*)$ / break  

              include uwsgi_params  

              proxy_pass http://ip:port  

                              }  

             }  

}  

接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址

3.配置文件中的listen是nginx监听的端口号,所以需要在阿里云服务器上为80端口添加安全组规则

在本地的浏览器登录阿里云服务器->进入控制台->点击安全组->点击配置规则->点击添加安全组规则,之后配置如下(注:入方向和出方向都要配置)

4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下

例如有两个项目文件夹分别为test1,test2,里面都有index.html。则目录结构如下

/home

       |--my-project

              |--test1

                      |--index.html

              |--test2

                      |--index.html

则在浏览器输入http://ip/test1/index.html

服务器便会在/home/my-project中找到test1下的index.html执行;

如果在浏览器中输入http://ip/test2/index.html

服务器便会在/home/my-project中找到test2下的index.html执行;

这样便可以在服务器下放多个项目文件夹。

5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下,则

[javascript] view plain copy

assetsPublicPath: '/test1/',  

如果用到了vue-router,则修改/router/index.js

[javascript] view plain copy

export default new Router({  

  base: '/test1/',   //添加这行  

  linkActiveClass: 'active',  

  routes  

})  

6.nginx配置文件中的location则是针对跨域处理,表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据,例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下

[javascript] view plain copy

const url = '/datas/seller'  

this.$http.get(url).then((response) => {  

  .....  

})  

7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下,目录结构如下

/home

       |--my-project

              |--test1

                      |--index.html

                      |--static

8.启动nginx

[plain] view plain copy

service nginx start  

9.至此项目部署成功,在浏览器下输入:  http://ip/test1/index.html  即可

     

      

第一步配置 vue.config.js

第二步修改路由,改为 hash模式

第三步文件打包,执行以下,目录中会出现一个dist文件夹,将文件拖到服务器的 root 文件夹中

第四步可以通过域名进行访问 http://www.linlin.run/my-project/index.html#/home

1、配置打包的命令npm run dev,打包后会将文件生成在dist文件夹下

2、vue-loader 和 vue-template-compiler版本不一致报错,vue-loader版本在10+ 则更新vue-template-compiler

2、静态文件、图片的引入,跟vue文件中引入路径保持一致,需要将静态文件复制,通过插件来实现

3、很多地方都有说的一个问题,目前我还没发现有什么用,先改着。

4、现在打开dist中的index.html 文件是能够看到我们的项目首页

1、打开终端 可以看到窗口左上角的shell,新建远程连接,输入账户信息后连接

2、上传文件

注意: 在上传文件之前,需要把目录清空 Linux 删除 rm -rf 文件(夹)名

put 本地文件路径 远程文件路径

这时文件上传已经成功,到ssh shell 上可以查看(ls命令查看当前目录下文件)。

3、 如果是压缩包则需要进行解压

1、我用的是ssh shell,打开并连接到阿里云服务,首先找到Nginx的配置文件

访问项目的本地的端口和Nginx的配置文件端口需要保持一致,访问阿里云ip: 端口号,就可以看到项目了~

1、配置匹配规则以最长匹配优先 所以api匹配到的会优先匹配第二条规则,这里资源到dist目录下查找,带有api的接口请求由8081转发到8090,这里的rewrite是将请求中的api去掉(因为我的真实的请求里没有api)

2、启动后一直404,改了半天 各种注释 ,后来 就成这样了,打回之前的写法也可以了,迷惑啊,跟router和rewrite的写法都没关系。

https://help.aliyun.com/document_detail/98728.html?spm=5176.2020520163.0.0.5072LSwoLSwojj

其中location配置项需要指定访问路径


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/720216.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-08-08
下一篇2023-08-08

发表评论

登录后才能评论

评论列表(0条)

    保存