Vue项目打包部署总结

最新推荐文章于 2024-05-21 16:51:22 发布

没你好看

最新推荐文章于 2024-05-21 16:51:22 发布

阅读量3.3k

点赞数

文章标签： vue.js nginx 前端

本文链接：https://blog.youkuaiyun.com/qq_51218646/article/details/122743528

版权

本文总结Vue项目打包过程中遇到的公共路径问题，重点讲解如何解决history模式下因publicPath设置不当导致的报错。同时，探讨了nginx中root和alias指令的区别，通过实例解析它们在处理location路径时的不同行为，并强调alias配置时需注意末尾的斜杠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目打包部署总结

Vue项目使用npm run build进行打包

打包挂载服务器运行是报错Uncaught SyntaxError: Unexpected token ‘＜‘

原因：资源公共路径设置的问题

你是不是把路由模式换成了histroy呢？

那么就应该在vue.config.js中把 publicPath 设置为 “/” 就行，前面不要加点，改了之后问题就解决了。

检查方法：在index.html引入script文件或者css文件时，都一个个点开看能不能点进去。

相关优秀文章学习：Vue项目打包部署总结

附带知识点记录：

`root`和`alias`的区别

nginx指定文件路径有两种方式root和alias

root

语法:  root path;

默认值:root html；

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

没你好看

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3项目打包后部署到服务器请求不到后台接口解决方法

10-15

在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...

Vue项目的打包部署

程小白的博客

08-19

3212

一.当前开发模式前后端分离的开发模式前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。二.打包这样就完成了打包，打包完成后只需要将dist下面的资源部署在服务器上。打包后的文件三.部署官网上下载下载稳定版。解压安装在一个没有中文和空格的目录下。安装完成后打开所在文件夹，其文件夹功能介绍如下：我们的项目文件（dist中的文件，为静态资源）就要拷贝到html文

参与评论您还未登录，请先登录后发表或查看评论

搭建的一套vue打包方案，方便记录一下

weixin_30278237的博客

09-02

464

package.json 配置如下： { "name": "rise-vue", "version": "1.0.0", "description": "rise vue", "main": "index.js", "scripts": { "watch": "webpack --mode development --watch", ...

解决vue3 vite打包报Root file specified for compilation问题

chensi_07的博客

05-21

666

把 "build": "vue-tsc --noEmit && vite build" 修改为 "build": "vite build" 就可以了。另外关于allowJs这个问题，在tsconfig.json文件中配置"allowJs": true,就可以了。修改package.json打包命令。

手把手教你如何把vue项目打包后部署到服务器（小白教程）

Orange71234的博客

06-21

1万+

（5）输入用户名密码登录出现如下页面，点击左侧网站-->添加站点-->输入域名-->根目录地址会自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。

Vue.js 如何进行打包部署

Java徐师兄的博客

06-06

2406

Vue.js 提供了一个简单、灵活的方式来构建用户界面。在开发完成后，需要对 Vue.js 应用程序进行打包部署，以便在生产环境中使用。在本文中，我们介绍了 Vue.js 中的打包部署以及如何进行打包部署。如果你是一个 Vue.js 开发者，并且还没有进行过打包部署，那么现在就是一个好时机来尝试一下吧！

Vue项目打包部署到iis服务器的配置方法

10-16

Vue项目开发完成后，需要通过打包工具如Webpack将其打包成静态资源，以便部署到服务器上。IIS (Internet Information Services) 是Windows系统上的一种Web服务器。在将Vue项目部署到IIS服务器上时，会遇到一些配置...

vue项目打包部署到服务器的方法示例

10-18

Vue项目通常会经历开发、构建、部署这几个步骤，而项目打包部署到服务器则是将开发好的Vue项目移至生产环境的重要环节。本文详细介绍了将Vue项目打包并部署到服务器上的具体方法和步骤，同时也会涉及到一些在部署...

Vue项目测试、发布root地址配置

geanwen的博客

03-13

5743

说明基本上所有的项目，在测试的时候和正式发布的时候根地址是不一样的; 测试环境连接测试后台方便测试; 正式环境连接正式后台地址，这已经不是新鲜的事了; 原来我们是手动去修改地址，在每次切换环境的时候; 下面说说VUE项目中怎样将测试环境和正式的地址提前配置好，防止忘记修改地址导致发布失败;利用的WebPack给生产环境和正式环境配置不同地址项目目录中有配置文件夹; 里面找到prod.env.js文...

Vue——自定义项目访问路径

热门推荐

小欣儿的专栏

08-02

2万+

默认情况下，Vue项目的访问路径以 /#/，但我们有时候可能需要给项目定义一个明确的访问路径，如 /my_vue/ 等，这时我们需要修改配置，自定义项目的访问路径，方法如下： 1. 在index.html添加 <meta base=”/pay/”> (pay自定义的名称) <!DOCTYPE html> <html> <head> &...

Vue实现动态路由的两种方式总结

P_Jade的博客

03-22

1万+

实现动态路由有两种方式，一种是后端返回什么，前端就展示什么，另一种是后端只返回角色，前端根据角色拼接数据信息展示。相比第一种方式，第二种方式在企业中更常用。第一种方式：（一）后端需返回类似Vue-router形式的json文件，如 [ {path:'/userlist',name:'userlist',title:'用户列表',component:'Userlist.vue'}, {path:'/role',name:'role',title:'角色管理',component:'Role.vu

vue 打包部署在 nginx服务中，以及出现的一些问题

qq_39751996的博客

07-06

7194

首先来说操作步骤前提： 1、你已经安装/下载好 nginx 2、你的vue 项目已经打包完成，并得到了dist文件夹部署开始： 1、vue 项目打包，在控制台输入 npm run build 等待打包结束后可在项目的同级目录下得到打包文件夹 dist，中包含了我们要部署的 index.html 文件 2、将下载好的 nginx 压缩包解压后，在文件夹地址栏输入 cmd 后回车后可以直接打开文件路径， 3、在窗口命令行中输入 nginx 启动指令： start nginx 然...

web项目部署到webapps下与部署在ROOT目录下

swebin的专栏

11-21

3530

1.如何部署到tomcat下将完成的项目打成war包，放到tomcat下的webapps目录下 2.启动tomcat自动生成项目文件 bin目录下的 startup.sh用于启动 shutdown.sh 用于关闭 3.启动好如下图 4.这个时候其实已经项目部署成功了，通过浏览器访问项目即可 5.将文件放置ROOT目录下，即可省去项目名称打开skjd-website文件 6.到现在这步，你的项目访问只需要i...

Vue.js学习笔记七-VUE-resource实现http请求与全局root请求路径配置

武汉小喽啰

06-22

1508

1. 写在前面 1. 在vue中不推荐使用jq操作DOM元素，所以我们发送ajax请求的时候，最好也是不要使用jq，而是用与vue高度契合的vue-resource来实现。 2. jsonp的实现原理 2.1 由于浏览器的安全限制，不允许ajax访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全 2.2 可以通过动态的创建script标签的形式，把scri...

Vue之路由路径path配置的一个坑总结【同级路由path必须唯一】

weixin_43343144的博客

04-09

1万+

Vue项目如何打包并部署(nginx)

weixin_51296247的博客

04-08

2万+

使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署。一.打包 vue项目其实可以直接通过一下语句进行打包： npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', outputDir.

Vue项目部署，打包发布上线

zep

06-29

5000

参考vuecli官方文档一、构建打包在发布上线之前，我们需要执行构建打包，将 .less、.vue、.js 等相关资源进行编译打包，转换成浏览器可以直接识别运行的普通 css、js、html。 # yarn run build 或者 yarn build npm run build VueCLI 会把打包结果生成存储到项目的 dist 目录中。正确的话应该会得到这样一个打包结果：二、本地预览测试打包结果注意：不能直接双击打开 index.html 运行。将 dist 放到一个 Web .

springboot+vue项目打包部署

Vue项目打包部署总结

Vue项目打包部署总结

root和alias的区别

`root`和`alias`的区别