vue项目完整搭建步骤

vue项目完整搭建步骤,第1张

为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为:>vue项目打包为dist,默认访问服务器绑定的域名,需要配置80端口,配置位置多默认为cd /usr/local/nginx/cong下的nginxconf。

非根目录需要alias配置路径
非根目录nginx刷新空白需要try_files配置刷新时公用的indexhtml
node的静态资源结合dist可以直接放到public下

vue安装了node还是无法启动js语言是由于之前的vue可能会有卸载残留,在电脑中搜索vuecmd将其删除即可。删除后输入如下命令npminstalvue-g,npminstallue-router-g,npminstallvue-cli-g即可安装成功。

一、node运行环境

1、npm install -g n  

通过npm 全局安装node

2、 sudo n 8160 

设置node版本

Password:

install : node-v8160

mkdir : /usr/local/n/versions/node/8160

fetch : >大家好,我是实验小张,简略记录一下自己做的一点儿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 // 调用packagejson里面的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 <镜像名称>:<版本号xx> , 生成镜像images_test:xx

4 - 第3步中的镜像在本地,本地运行可执行 docker run -t -p out_port:docker_port images_test:xx

    如果需要再任何服务器上的docker环境下运行此镜像,则需要上传至镜像仓库,我选择的是阿里云免费个人版容器服务

    $ docker login --username=n registrycn-hangzhoualiyuncscom

    $ docker tag [ImageId] registrycn-hangzhoualiyuncscom/xxx/xxx:[镜像版本号]

    $ docker push registrycn-hangzhoualiyuncscom/xxx/xxx:[镜像版本号]

    然后可以拉取镜像,docker pull registrycn-hangzhoualiyuncscom/xxx/xxx:[镜像版本号]

5 - 上面的事情处理完毕之后,就可以部署到服务器上了,最后一步,运行自制的vue镜像

    docker run -d -p 8080:80 image_test:<version no> 

6 - 也可以通过docker-compose up -d来运行yml文件来运行镜像,还可以通过volumes参数来挂载数据卷

先大略说这么多,docker是一个比较好用的工具,提高开发效率和降低运维成本,easy~

    

一本地环境调试请求跨域问题

1配置代理域名:

config/indexjs
2npm run dev 打包  生成 dist 目录  >

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/13464998.html

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

发表评论

登录后才能评论

评论列表(0条)

保存