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

这篇具有很好参考价值的文章主要介绍了Vue项目如何打包并部署(nginx)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用场景:

我们常使用前后端分离项目时,会需要将前端vue打包然后部署。

一.打包

vue项目其实可以直接通过一下语句进行打包:

npm run build

默认打包情况如下:

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

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

当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:

1.首先在项目根目录下创建vue.config.js文件

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

配置内容如下所示(附带跨域问题解决):文章来源地址https://www.toymoban.com/news/detail-425530.html

module.exports = {
    //打包
    publicPath: './',
    outputDir: 'test', //打包输出目录
    assetsDir: './static', //放置生成的静态资源
    filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
    lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证
    productionSourceMap: false,// 打包时不生成.map文件
    
    // 解决跨域配置
    devServer: {                /

到了这里,关于Vue项目如何打包并部署(nginx)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤,从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf)

    目录 一丶前言 二、安装nginx 1.准备nginx 2.服务器上传nginx 3.解压nginx  4.安装相关依赖库 5.编译nginx 6.启动nginx 7.访问nginx  8.安装成系统服务 三、安装Tomcat 1.安装JDK(如果安装并配置环境变量了可以略过) 2.准备Tomcat 3.服务器上传tomcat 4.解压tomcat  5.启动tomcat 6.访问tomcat 7.设置

    2024年02月05日
    浏览(68)
  • 【Linux】Nginx安装使用负载均衡及动静分离(前后端项目部署),前端项目打包

             Nginx 是一款高性能的 Web 服务器和 反向代理服务器 ,也可以充当负载均衡器、HTTP 缓存和安全防护设备。它的特点是内存占用小、稳定性高、并发性强、易于扩展,因此在互联网领域得到了广泛的使用。 总结出以下三点: 负载均衡 :流量分摊 反向代理 :处理外

    2024年02月06日
    浏览(45)
  • 【Vue3实践】(六)Vue3使用vite处理环境变量、打包部署、nginx配置

    由于在日常开发中会有一部分前端的开发任务,会涉及到Vue的项目的搭建、迭代、构建发布等操作,所以想系统的学习一下Vue相关的知识点,本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。 历史文章链接如下: 《Vue3搭建、路由配置与基本语法

    2023年04月08日
    浏览(141)
  • 如何在linux服务器上用Nginx部署Vue项目,以及如何部署springboot后端项目

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 本文内容记录如何在Linux(Ubuntu)系统上安装Nginx,并部署打包好的Vue前端项目,最后通过浏览器访问。 提示:以下是本篇文章正文内容,下面案例可供参考

    2024年04月16日
    浏览(48)
  • Vue项目上线打包好的文件如何在服务器上部署?

    1.打开router下的js文件,调成hash模式: mode:\\\'hash\\\'   2.终端输入: npm run build 3.此时项目中会多出一个dist的文件,这个文件就是我们打包出来的项目   (1)建立一个新的文件夹 (2)终端输入命令: npm init (3)输入: xxx_server (4)然后一路按回车到文件夹——框架完成,如下图

    2024年02月11日
    浏览(57)
  • 使用Nginx反向代理,将React项目打包后部署到服务器的二级子目录

    我们上线一个项目的时候如果服务器上只有这一个项目的话可以直接将打包后的代码部署到服务器指定的根目录,然后直接上线看就可以看到,不用配置其他项。 但是,如果服务器有多个项目的话,我们就需要将代码部署到服务器根目录里边的子目录了,而放到子目录的话,

    2024年03月26日
    浏览(55)
  • Docker使用nginx部署VUE项目

    目录 一、安装Docker和一些基本Docker命令 二、打包VUE项目 三、写nginx配置文件 四、写Dockerfile文件 五、构建镜像 六、运行容器 七、挂载目录 八、使用docker-compose部署项目 总结 安装略,基本指令如下: vue项目根目录进入终端输入npm run build打包项目,在项目根目录会生成一个

    2024年02月07日
    浏览(45)
  • 手把手教你如何把vue项目打包后部署到服务器(小白教程)

    一.需要用到的工具 vscode 下载链接:Visual Studio Code - Code Editing. Redefined FinalShell 下载链接:FinalShell官网 二.打包步骤 1.vscode打开你的vue项目-- 点终端 -- 输入npm run build 按回车进行打包;  2.打包成功 , 生成了dist文件夹, 打包好的文件会默认存放在里面;   三. 用FinalShell连接服

    2024年02月16日
    浏览(58)
  • 详解如何使用Jenkins一键打包部署SpringBoot项目

    目录 1、Jenkins简介 2、Jenkins的安装及配置 2.1、Docker环境下的安装​编辑 2.2、Jenkins的配置 3、打包部署SpringBoot应用 3.1、在Jenkins中创建执行任务 3.2、测试结果 任何简单操作的背后,都有一套相当复杂的机制。本文将以SpringBoot应用的在Docker环境下的打包部署为例,详细讲解如

    2024年02月05日
    浏览(60)
  • Linux如何使用Nginx部署前端项目

    输入命令: rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm 输入命令: yum install nginx 注1:yum方式安装nginx,它的安装根目录为 /etc/nginx 注2:查看nginx版本      输入命令: rpm -qa | grep nginx  小嘴一提: Nginx的默认端口号是80,所以在访问项目输入地址的

    2023年04月25日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包