服务器部署Vue脚手架工程，以及遇到的问题总结

已于 2022-11-16 16:02:55 修改
阅读量783 收藏 1
点赞数
分类专栏： 笔记 文章标签： 服务器 vue.js 前端
于 2022-11-15 23:32:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/127876501
版权

文章目录

直接打包脚手架工程

npm run build

把生成后的打包文件dist直接丢进服务器

这里我选择的nginx默认执行路径，不需要配置nginx.conf直接就可以跑
因为打包后的dist里面包含index，nginx可以直接识别

在这里插入图片描述

脚手架部署到服务器遇到的问题

路由的history和hash模式

有什么区别

就是网页路径中包不包含“#”的区别

history模式

前期不建议使用history模式，会导致刷新页面时响应404问题

在这里插入图片描述

hash模式

前期用这个就行了，虽然带了#不但影响观感而且与后台交互数据不方便，但是可以用来前期过度

如何配置

在这里插入图片描述

vs环境中项目正常，但是部署到服务器时异常（“install” not define）

这个问题点挺多的，我在网上搜到的大多都是vue-router版本与vue版本不匹配导致的，但是我vue2与vue-router 3.5.2是没问题的

我的问题（已解决）

问题，服务器运行失败，install not define

在这里插入图片描述

解决

注释掉14行
在这里插入图片描述

鬼鬼骑士
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 项目部署到服务器的问题解决方法
01-19
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，...
解决vue脚手架项目打包后路由视图不显示的问题
10-18
总结来说，解决Vue CLI项目打包后路由视图不显示的问题，关键在于正确配置Vue Router的`base`选项，并在服务器端设置适当的路由重定向。这需要开发者对前端路由和服务器配置有深入的理解。通过这些调整，你的Vue项目...
vue脚手架项目部署到服务器,vue脚手架项目发布
weixin_42377538的博客
08-09 804
使用命令：npm run build即可我们在命令行中输入npm run build命令后，vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出，你执行的npm run build命令就相对执行的 node build/build.js 。在执行完npm run build命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务...
搭建Vue脚手架遇到的一些问题和问题的解决方案。
qq_48692433的博客
03-18 526
错误原因： 这里是你的vue文件名字不是它推荐的多单词形式，如schoolName。解决方案：这里由于没有找到更好的解决方案，我只能被逼无奈按照他的要求给文件名改成小驼峰形式(schoolName)。总结：搭建Vue前一定要看看搭建的是Vue2环境，还是Vue3环境，是不是你想要的环境。
搭建vue 脚手架遇到的问题
yiguang_820的博客
08-14 334
1.在搭建vue项目的时候出错： 解决方法： 输入： npm config set strict-sslfalse npm install -g supervisor 之后再输入npm install --global vue-cli即可 2.
vue-cli脚手架的搭建及vue项目中遇到的一些问题
ddong345的博客
03-01 659
Vue-cli脚手架搭建 ----逆战班---- 随着vue.js越来越火爆,更多的项目都用到vue进行开发，在实际的开发项目中如何开发脚手架呢,今天跟大家分享一下,并且在项目中遇到的一些问题，怎么去解决… 首先需要了解以下的知识,你才能更好的去理解 html CSS Javascript Node.js 环境(npm 包管理工具) Webpack 自动化构建工具 一，安装node.js 当...
新手快速利用脚手架搭建VUE项目并了解项目结构，打包部署到服务器上
weixin_59883636的博客
11-03 675
vue 项目
Vue CLI 3.x 自动部署项目至服务器的方法
10-17
本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
解决vue-cli3 使用子目录部署问题
10-18
然而，在实际部署过程中，可能会遇到将应用部署到服务器子目录的情况，这就会引发一些问题。本文主要针对"vue-cli3 使用子目录部署问题"进行深入解析。 首先，当我们在开发环境中使用 `vue-cli3 build` 命令时，...
Vue环境配置 搭建脚手架
TongJ_的博客
08-14 443
node相当于前端的服务器，用来编译js，vue和react框架都一个在node环境下进行安装和执行，为了让js的下扩展语法，列如es6和typescript进行兼容，则用node编译。package-lock.json 记录第三方模块的详细信息，例如：名称，版本，下载地址...模块打包机 ,我们可以把服务器下项目打包成浏览器下执行的项目，也可以打包成手机的app安装包。vue的脚手架cli：帮助你快速搭建项目，给项目内容进行分包分层，进行环境配置。npm install 模块名 -g全局安装模块。....
Vue项目部署到阿里云服务器过程及注意事项
wnx_52055的博客
04-03 9470
一、打包项目(脚手架创建的项目) 1、编辑config目录下的index.js和 prod.env.js配置文件 注意：线上环境assetsPublicPath: './'必须这样配置，否则打包后部署到服务器上会找不到静态资源而显示空白页。 assetsPublicPath: './'配置打包后index.html中使用的是相对路径 <script type=text/javascr...
解决办法：VUE项目部署后，突然Vue is not defined，控制台CDN资源报错
lh_seckill的博客
06-20 803
CDN资源异常解决方案
vue项目部署至服务器报错vue is not defined
初叙
05-23 2507
vue项目部署至服务器报错vue is not defined，有几个文件访问不到： 刚开始不知道，找不着文件，后面搜到了cdn。应该是cdn挂了，替换了另一个cdn网站：bootcdn.cn 本地打包部署系统就通了，关于cdn也是今天刚知道，后面了解一下。这个配置在vue.config.js里面: const assetsCDN = { // webpack build externals externals: { vue: 'Vue', 'vue-router'.
vue.js放到当前目录下了，引用正确却说vue is not defined
weixin_52439623的博客
06-20 301
vue.js放到当前目录下了，引用正确却说vue is not defined
引入CDN后报错 vue is not defined
m0_72818021的博客
05-22 956
之前看到有人出了这个问题，但是他们都是new Vue({})的时候v没大写，当时没想过，还以为和我这个不一样。刚刚看main-prod.js文件里，我是这样导入vue的（import Vue from 'vue'），就想着既然这里大写那我就是这个改一下，没想到成功了！看到有人说是js引入位置不对，还有各种其他原因，也问了gpt，说我index.html没有使用vue的实例。我本来写的是vue:'vue'，改为大写Vue:'vue'就不报错了！vue.config.js代码如下（找到bug修改后的）
nginx部署vue
HUALIXIAN的博客
07-10 958
nginx部署vue项目，利用反向代理实现项目接口请求
VScode——Vue is not defined
weixin_59171659的博客
12-28 1511
Vue is not defined
Vue is not defined的可能解决办法
Wjeana的博客
03-08 4554
原因是没有正确导入配置文件 我使用了thymeleaf渲染,如果直接写相对路径,位置是不对的,需要@{}让thymeleaf处理才可以正确导入配置,或者简单粗暴的方法就是src直接加绝对路径,但是一般开发不这么用
Uncaught ReferenceError: Vue is not defined
程序猿的樊笼
06-05 436
最近开发的一个项目，前段时间开发过程中还好好的，最近一次打包部署后，浏览器访问一直是打不开：打开控制台，看到的一个报错如下： 作为一个前端不太熟练的后端研发，我在网上根据关键字：Vue is not defined，搜到的一些场景和解决方案，与我的都不一样。如果有类似情况的，可以看下我的场景是否与你问题一样。看下完整报错：猜测是这个CDN突然不能用了，在vue.config.js文件中修改cdn： 更换一个可以正常访问的CDN，问题解决。...
怎么实现 vue脚手架
最新发布
09-18
实现Vue脚手架的步骤如下： 1. 首先，安装Node.js和npm来管理项目的依赖。 2. 使用Vue CLI来创建Vue项目的脚手架。可以通过在命令行中运行以下命令来全局安装Vue CLI：`npm install -g @vue/cli`。 3. 创建一个新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值