腾讯云服务器部署vue（腾讯云服务器部署web项目）

本篇文章给大家谈谈腾讯云服务器部署vue，以及腾讯云服务器部署web项目对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、vue如何将项目部署到服务器上并且使外网能够访问到
• 2、vue项目要部署在服务器上，那么服务器需要安装node.js环境吗？
• 3、怎么把VUE项目部署到服务器上面
• 4、vue项目如何部署到服务器
• 5、vuejs怎么在服务器部署

vue如何将项目部署到服务器上并且使外网能够访问到

你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ，通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 index.html 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

vue项目要部署在服务器上，那么服务器需要安装node.js环境吗？

最好是安装一个。

1.如果你仅仅是打包好的vue相机，那么要看服务端使用的是什么语言，如果是node的话，肯定要安装node环境的，但是如果不是node，那么就没有必要了。

2.如果你想在服务端跑vue的项目，也就是在远程端做开发工作，那么肯定是要安装node的，毕竟vue开发环境需要node。

基本上服务端也就这两种需求，node包其实很小，安装一个也不费事，还可以方便开发，我觉得在远程端按一个最好。

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

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/?(.*)$ /$1 break;  

              include uwsgi_params;  

              proxy_pass ;  

                              }  

             }  

}  

接下来就根据配置文件进行下一步工作。配置文件中的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

则在浏览器输入

服务器便会在/home/my-project中找到test1下的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的请求转发给,本文中这个下就是需要的数据，例如,在本地项目文件中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.至此项目部署成功，在浏览器下输入:    即可

vue项目如何部署到服务器

第一步配置 vue.config.js

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

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

第四步可以通过域名进行访问

vuejs怎么在服务器部署

用vue-cli搭建的做法

1、npm run build

2、把dist里的文件打包上传至服务器 例 /data/www/，我一般把index.html放在static里

所以我的文件路径为：

/data/www/static

|-----index.html

|-----js

|-----css

|-----images

....

3、配置nginx监听80端口， location /static alias 到 /data/www/static，重启nginx

location /static {

alias /data/www/static/;

}

4、浏览器访问即可

腾讯云服务器部署vue的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于腾讯云服务器部署web项目、腾讯云服务器部署vue的信息别忘了在本站进行查找喔。