Vue项目使用npm run dev后,只能用node语言写后端吗?

Vue项目使用npm run dev后,只能用node语言写后端吗?,第1张

后端用什么语言都行,Vue使用构建工具只是前端开发形式的改变,不影响后端工作。你应该是碰到了跨域问题。vue使用构建工具,采用的是node服务支持。例如webpack通常是以8080端口运行。但是后端通常是80端口,也就是说,这中间存在跨域。
但是,Vue+webpack打包以后,就是静态文件了,可以跑在任何端口下,通常支持和后端接口同时运行在80端口,这个时候也就不存在跨域了。也就是说,跨域往往是在开发过程中,实际的生产无需跨域。当然,那种业务拆分很彻底的另说,那本身就是要跨域的。
解决办法:1后端服务器支持跨域,或者jsonP等跨域方法
2webpack有代理方法,设置代理可以解决跨域问题
3mockjs模拟后端接口,打包前一定要移除mockjs。通常可以用processenvNODE_ENV==='development'来判断是否为开发环境。开发环境下引用mockjs即可。

你的服务器是什么系统啊 ,,,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 下面的 indexhtml 可以看到

nginx默认的html

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

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

在你新建的文件

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

注意路径一定要写全

最后重新加载下 nginx -s reload

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

这就可以了

还有 用express 部署这个 简单些

我们点击 npm run dev 的时候,这就是启动 Vue 工程项目,那么它启动过程是什么样的呢? Vue 项目启动过程,本文简要介绍。

在执行 npm run dev 的时候,会在当前目录中寻找 packagejson 文件,包含项目的 名称版本 、 项目依赖 等相关信息。

从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpackdevconfjs 配置并启动 webpack-dev-server 。

webpackdevconfjs 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。

可以看到,在 indexjs 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是 8080 ,这里可以进行修改。

indexhtml 的内容很简单,主要是提供一个 div 给 vue 挂载。

mainjs 中, 引入了 vue 、 App 和 router 模块, 创建了一个 Vue 对象,并把 Appvue 模板的内容挂载到 indexhtml 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。

上面 mainjs 把 Appvue 模板的内容,放置在了 indexhtml 的 div 标签下面。查看 Appvue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view , router-view 的内容将由 router 配置决定。

查看 route 目录下的 indexjs ,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介绍显示内容。

所以,页面关系组成是 indexhtml 包含 Appvue,Appvue 包含 HelloWorldvue 。

到这,我们开始安装 router 、 vuex 。
Ctrl+C 退出启动,继续执行 vue-cli ,脚手架安装插件 router 和 vuex 开始。

输入一个大写Y,按下Enter

vuex 是专门为 Vuejs 设计的状态管理库,以利用 Vuejs 的细粒度数据响应机制来进行高效的状态更新。

Vuex 主要有五部分:

安装 vuex

接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 storejs 文件
文件夹目录 长得是这个样子

在保证我们处于我们项目下,在命令行输入下面命令,然后,安装 vuex 。

vuex 的关系图

开始使用,在 mianjs 中,引入 vuex

④然后告知 vue 开始使用 vuex (Vueuse(Vuex))
在 storejs 文件中,引入 vuex 并且使用 vuex ,这里注意我的变量名是大写 Vue 和 Vuex

⑤接下来,在mainjs中引入store

到这里算是,以及完成了。

我们再重新看一下此时的项目结构,多了routerjs和storejs,其它相关的文件也被修改

vue在服务端部署时,我们都知道通过npm run build 指令打包好的dist文件,通过>简述:Spring boot+Vue 前后端分离项目部署,主要采用docker容器部署方式。

Springboot项目部署:docker构建mysql环境+docker构建项目自身环境。

Vue项目:使用docker启动nginx服务器方式代理部署。

项目使用mysql80作为数据源,所以部署时需要使用docker构建mysql环境及项目自身环境。

连接出现1251错误时:

首先将项目进行打包:mumu-001-SNAPSHOTjar

到此,springboot项目采用docker方式运行部署结束。

使用docker容器方式运行nginx服务器。

对于nginx服务器,重要的两个 *** 作是:

所以我们在配置启动nginx容器的时候,需要将对应的目录及文件进行宿主机挂载,方便后续更新资源及 *** 作

启动命令:

1、首先,列出来我们需要的东西: nodejs环境(npm包管理器)vue-cli 脚手架构建工具cnpm npm的TB镜像
2、如果你是用vue-cli webpack builid之后,放到web服务器,访问indexhtml就可以运行了。
3、常见的web服务器有tomcat,nginx等。推荐使用nginx。
4、在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 npm run dev 命令,其中的“run”对应的是packagejson文件中,scripts字段中的dev,也就是 node build/dev-serverjs命令的一个快捷方式。
5、 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。END


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存