阿里云vue配置（阿里云部署vue项目）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享阿里云vue配置的知识，其中也会对阿里云部署vue项目进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、Vue项目启动过程以及配置
- 2、【实验1】docker部署vue简略过程
- 3、怎么把VUE项目部署到服务器上面
- 4、Vue本地项目过程随笔(4) 部署到服务器
- 5、vue element-ui 上传图片到oss阿里云(第三方服务)
Vue项目启动过程以及配置
我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。
在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。
可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。
index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。
输入一个大写Y，按下Enter
vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。
② vuex 的关系图
③ 开始使用，在 mian.js 中，引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来，在main.js中引入store
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
【实验1】docker部署vue简略过程
大家好，我是实验小张，简略记录一下自己做的一点儿docker基础处理过程。
1 - linux或者windows下安装nodejs环境
2 - 创建vue项目
npm install vue-cli -g // 全局安装vue脚手架
vue list // 查看脚手架安装工具
vue init webpack 项目名称 // 创建vue项目，以此可以开发vue
npm install // 安装依赖包
npm run dev // 调试运行，vue-cli-service serve
npm run build // 调用package.json里面的scripts对应的脚手架命令
输出dist
3 - 根据dist和Dockerfile文件制作镜像
#使用 nginx最新版本作为基础镜像，dist静态web文件塞入nginx后，通过访问nginx就可以访问到我们的vue
FROM nginx
#将当前文件夹的dist文件复制到容器的/usr/share/nginx/html目录
COPY./dist/usr/share/nginx/html/#声明运行时容器暴露的端口（容器提供的服务端口）
EXPOSE 80
#CMD:指定容器启动时要运行的命令，后台运行nginx
CMD ["nginx","-g","daemon off;"]
以上作为Dockerfile脚本，运行 docker build -t 镜像名称:版本号x.x . ， 生成镜像images_test:x.x
4 - 第3步中的镜像在本地，本地运行可执行 docker run -t -p out_port:docker_port images_test:x.x
如果需要再任何服务器上的docker环境下运行此镜像，则需要上传至镜像仓库，我选择的是阿里云免费个人版容器服务
$ docker login --username=n**** registry.cn-hangzhou.aliyuncs.com
$ docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/xxx/xxx:[镜像版本号]
$ docker push registry.cn-hangzhou.aliyuncs.com/xxx/xxx:[镜像版本号]
然后可以拉取镜像，docker pull registry.cn-hangzhou.aliyuncs.com/xxx/xxx:[镜像版本号]
5 - 上面的事情处理完毕之后，就可以部署到服务器上了，最后一步，运行自制的vue镜像
docker run -d -p 8080:80 image_test:version no.
6 - 也可以通过docker-compose up -d来运行yml文件来运行镜像，还可以通过volumes参数来挂载数据卷
先大略说这么多，docker是一个比较好用的工具，提高开发效率和降低运维成本，easy~
怎么把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本地项目过程随笔(4) 部署到服务器
服务器购买，端口开放不再多讲 文件的上传使用 Xftp 。
工作经历内容用到的 省略号特效
本地Vue项目打包,生成文件放在Vue项目目录下的dist文件夹
在阿里云服务器控制台内安装nodejs，端口开放在防火墙选项下
安装nginx
npm install命令遇到relocation error: npm: symbol SSL_set_cert_cb的报错问题
改标签栏icon，以及标签名
安装完nginx后 用Xftp登陆服务器，上传打包好的项目。
保存，回到服务器控制台输入 重新运行nginx
现在可以通过ip地址访问到打包过的Vue项目了
我的项目链接:
Github
vue element-ui 上传图片到oss阿里云(第三方服务)
一、阿里云设置：
8.1 进入 OSS 管理控制台 界面。
8.2 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
8.3 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。
8.4 单击 创建规则，打开 设定跨域规则 对话框。
8.5 设置跨域规则。
8.6 单击 确定。
说明： 您也可以对已有的规则进行编辑和删除操作。
截止到这里，阿里云创建Bucket、角色、授权、跨域等前期准备工作就全部完成了。
二、安装使用：
关于阿里云vue配置和阿里云部署vue项目的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。