VueDemo-24项目打包上线部署和25本地搭建服务器，模拟项目上线

已于 2022-06-29 11:42:06 修改
阅读量540 收藏
点赞数
文章标签： javascript webview vue.js
于 2022-02-09 14:28:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a9874561328/article/details/122841269
版权

24.项目打包上线部署

1.项目打包

yarn build

打包出来的dist文件就是我们需要上传的项目文件目录

监测一下dist/index.html

<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><title>haigou-vue-app</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2789504_3dwn33081n3.css"><script>(function(a, b, c, d, e, j, s) {
          a[d] = a[d] || function() {
              (a[d].a = a[d].a || []).push(arguments)
          };
          j = b.createElement(c),
              s = b.getElementsByTagName(c)[0];
          j.async = true;
          j.charset = 'UTF-8';
          j.src = 'https://static.meiqia.com/widget/loader.js';
          s.parentNode.insertBefore(j, s);
      })(window, document, 'script', '_MEIQIA');
      _MEIQIA('entId', '1414f57e7995f5aeb900ce1888a67be1');
       // 在这里开启无按钮模式（常规情况下，需要紧跟在美洽嵌入代码之后）
      _MEIQIA('withoutBtn');</script><link href="/css/cart.1f8238e9.css" rel="prefetch"><link href="/css/chunk-3e454a62.66ab5faa.css" rel="prefetch"><link href="/css/chunk-40c945b6.42e1b85f.css" rel="prefetch"><link href="/css/chunk-4f897a90.5ee8364d.css" rel="prefetch"><link href="/css/chunk-55bd1c4a.4740a127.css" rel="prefetch"><link href="/css/chunk-5f17f0ea.66ab5faa.css" rel="prefetch"><link href="/css/chunk-b0b8e48a.66ab5faa.css" rel="prefetch"><link href="/js/cart.68747a46.js" rel="prefetch"><link href="/js/chunk-2d0ba375.5218fb8a.js" rel="prefetch"><link href="/js/chunk-3e454a62.0571f3de.js" rel="prefetch"><link href="/js/chunk-40c945b6.3c28cc8a.js" rel="prefetch"><link href="/js/chunk-4f897a90.1871c407.js" rel="prefetch"><link href="/js/chunk-55bd1c4a.a185d9f7.js" rel="prefetch"><link href="/js/chunk-5f17f0ea.98df8c39.js" rel="prefetch"><link href="/js/chunk-b0b8e48a.ef60906e.js" rel="prefetch"><link href="/js/kind.dea4159b.js" rel="prefetch"><link href="/js/user.f9db9955.js" rel="prefetch"><link href="/css/app.54f4611e.css" rel="preload" as="style"><link href="/css/chunk-vendors.8d89258b.css" rel="preload" as="style"><link href="/js/app.0668da6d.js" rel="preload" as="script"><link href="/js/chunk-vendors.b6293534.js" rel="preload" as="script"><link href="/css/chunk-vendors.8d89258b.css" rel="stylesheet"><link href="/css/app.54f4611e.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="haigou-vue-app"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but haigou-vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.b6293534.js"></script><script src="/js/app.0668da6d.js"></script></body></html>

发现上述文件引入的资源 css/js,都是以绝对路径的方式引入的，

此种情况下，项目要上线，需要找到服务器的静态资源目录，将dist文件夹下的内容上传到 静态目录

会对静态资源的目录造成一定的影响，后期不方便维护

2.相对路径下的打包

配置vue.config.js

​
module.exports = {
  publicPath: './', // 表示打包出来的是 相对路径
  devServer: {
    proxy: 'http://121.89.205.189/api' // 只能代理一个地址
  }
}
​
yarn build
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="favicon.ico"><![endif]--><title>haigou-vue-app</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2789504_3dwn33081n3.css"><script>(function(a, b, c, d, e, j, s) {
          a[d] = a[d] || function() {
              (a[d].a = a[d].a || []).push(arguments)
          };
          j = b.createElement(c),
              s = b.getElementsByTagName(c)[0];
          j.async = true;
          j.charset = 'UTF-8';
          j.src = 'https://static.meiqia.com/widget/loader.js';
          s.parentNode.insertBefore(j, s);
      })(window, document, 'script', '_MEIQIA');
      _MEIQIA('entId', '1414f57e7995f5aeb900ce1888a67be1');
       // 在这里开启无按钮模式（常规情况下，需要紧跟在美洽嵌入代码之后）
      _MEIQIA('withoutBtn');</script><link href="css/cart.1f8238e9.css" rel="prefetch"><link href="css/chunk-3e454a62.66ab5faa.css" rel="prefetch"><link href="css/chunk-40c945b6.42e1b85f.css" rel="prefetch"><link href="css/chunk-4f897a90.5ee8364d.css" rel="prefetch"><link href="css/chunk-55bd1c4a.4740a127.css" rel="prefetch"><link href="css/chunk-5f17f0ea.66ab5faa.css" rel="prefetch"><link href="css/chunk-b0b8e48a.66ab5faa.css" rel="prefetch"><link href="js/cart.68747a46.js" rel="prefetch"><link href="js/chunk-2d0ba375.5218fb8a.js" rel="prefetch"><link href="js/chunk-3e454a62.0571f3de.js" rel="prefetch"><link href="js/chunk-40c945b6.3c28cc8a.js" rel="prefetch"><link href="js/chunk-4f897a90.1871c407.js" rel="prefetch"><link href="js/chunk-55bd1c4a.a185d9f7.js" rel="prefetch"><link href="js/chunk-5f17f0ea.98df8c39.js" rel="prefetch"><link href="js/chunk-b0b8e48a.ef60906e.js" rel="prefetch"><link href="js/kind.dea4159b.js" rel="prefetch"><link href="js/user.f9db9955.js" rel="prefetch"><link href="css/app.54f4611e.css" rel="preload" as="style"><link href="css/chunk-vendors.8d89258b.css" rel="preload" as="style"><link href="js/app.5e9d2019.js" rel="preload" as="script"><link href="js/chunk-vendors.b6293534.js" rel="preload" as="script"><link href="css/chunk-vendors.8d89258b.css" rel="stylesheet"><link href="css/app.54f4611e.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="haigou-vue-app"><link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but haigou-vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.b6293534.js"></script><script src="js/app.5e9d2019.js"></script></body></html>

更改打包出来的项目名称 sz2108-vue,

找到服务器的静态目录，将刚打包出来的文件夹上传进去

上传完成以后，可以通过服务器的ip地址，再加上文件夹即可访问项目

比如 服务器的ip地址为121.89.205.189:3001，访问 haigou-vue-app

发现路由均为 404，

3.将路由模式调整为hash模式

const router = new VueRouter({
  // mode: 'history', // hash
  mode: 'hash', // hash
  base: process.env.BASE_URL,
  routes
})
yarn build

haigou-vue-app

25.本地搭建服务器，模拟项目上线

npx express server-app     创建服务器（npx 是安装node之后自带的一个指令）
​
cd server-app
​
yarn     /    cnpm i
​
yarn start

可以将打包出来的vue的项目的文件夹拷贝到 当前项目的 public 目录内部

通过 http://localhost:3000/sz2108-vue/ 就可以在服务器的环境下访问项目

前端大灰狼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端框架-Vue
AyinMars的博客
03-25 6260
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
谷粒商城项目搭建思路
super_song的博客
06-21 1738
文章目录1. 基础篇核心技术点1.1 搭建环境2.高级篇核心技术点3. 集群篇 1. 基础篇 核心技术点 微服务基础开发： 逆向工程、微服务基础开发 SpringBoot、Mybatis、MybatisPlus、JCR303、Restful Maven、Git、Vagrant、Linux、Docker Aliyun-Oss、MySQL、Redis ES6、Vue、element-ui 目标：从0开始做一个合格的小全栈程序员 1.1 搭建环境 使用VirtualBox搭建虚拟机环境，需要设置cpu 2.高
vue项目本地模拟在服务端情况
yunbabac的博客
09-23 253
做项目封装axios时遇到了问题，要判断是开发环境与生产环境等，修改baseurl 怎么在本地模拟服务器呢，要查看一下变量在服务端是否为正确的值 运行打包命令，npm run build 在打包好的dist文件夹index.js文件中查看，格式化一下 鼠标右键，点击live server 开启本地服务，（live server 为vscode上的一个插件） 报错找不到资源，原因为路径问题，需要把所有路径‘/xxxxxx’改为‘./xxxx'或‘xxx’ 方法一：在vue.conf..
【博客部署教程二】项目部署上线
qq_44723773的博客
12-31 918
文章目录一、前提二、后端部署和脚本三、前端部署四、Nginx配置五、提醒 一、前提 在项目的pom.xml中检查packaging为jar的打包方式 二、后端部署和脚本 2.1 选择IDEA右侧的Maven按钮，双击package 2.2 打包之后会在项目的target文件夹下生成jar包 2.3 新建文件，编写Dockersfile（ps：不需要后缀，直接以文件的格式） FROM java:8 VOLUME /tmp ADD blog-springboot-0.0.1.jar blog.jar
模拟上线效果
u014788505的博客
06-25 186
npm init -y 生成package.json 包管理文件 2.npm i express -S 安装express服务器 就会出现相关的依赖 nodemodules文件夹 3.把打包完成的dist文件夹复制过来 4.新建app.js const express = require(‘express’) const app = express() // 托管本地静态页面 //./dist代表dist文件夹 app.use(express.static(’./dist’)) app.listen.
vue3修改index.html中的link，icon无效问题，需要配置pwa
小糖穿越火线
10-23 1371
默认配置： pwa.iconPaths { favicon32: ‘img/icons/favicon-32x32.png’, favicon16: ‘img/icons/favicon-16x16.png’, appleTouchIcon: ‘img/icons/apple-touch-icon-152x152.png’, maskIcon: ‘img/icons/safari-pinned-tab.svg’, msTileImage: ‘img/icons/msapplication-icon-144
解决Vue 项目打包后favicon无法正常显示的问题
12-07
在开发中经常需要为项目添加favicon以增加网站辨识度，在使用Vue开发中出现添加的favicon.ico无法显示问题，如下给出解决方法： 问题分析： 问题根源在于路径，如果使用http链接作为favicon地址一般不是出现问题，出现问题的基本在使用本地图片作为favicon。 如下常规配置： 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下，同时在index.html中正确配置favicon路径。 项目启动后会发现该中配置方式并没有生效： 打包后的项目同样存在问题。 (很抱歉的说，写到这里才发现我目前并没有解决本地无法添加favicon的问题，只是解
前后端不分离部署教程(基于Vue，Nginx)
weixin_30919571的博客
12-03 3893
有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的，那我岂能坐视不管，如此宠粉的我肯定是要给发一篇教程的，话不多说，开始操作 前端假如我们要发布我们的Vue项目，假设我们前端用的是history路由(要发就发个全套的)，并且在后端带有一个二级目录，以便于可以在服务器上部署N个项目，在这里后台服务器的话，我用Nginx服务器来给大家模拟，接下来就面对疾风吧： 　一、在这里我前端v...
2022前端知识整理：十、vue基础
weixin_42373976的博客
07-15 955
2022前端知识整理：第十部分、vue基础，仅包含vue2.0相关知识，建议先完成html5、css3和JavaScript ES6之后再学习。部分图片未上传成功，稍后完善，请见谅。
前端面试题--vue
weixin_44501366的博客
10-17 4645
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一 个会影响其他.Less的简单使用（一）——变量的用法Less是css的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。变量一、变量正常用法（variables）在一个位置控制常用值.less文件中} **
vue各个文件夹含义
最新发布
tianpeng666的博客
10-30 225
在上述引用中，我们可以看到在app.vue文件中，有一个img标签，其中的src属性指定了logo.png的URL。babel.config:是一个JS编译器，兼容低版本浏览器，引入babel，将es6转为es5babel的配置文件（相当于翻译官，比如把ES6相关语法翻译为ES5，兼容性更好，一般不碰）vue.config:是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
Vue项目设置favicon
JavaStudy的博客
09-18 1303
vue-cli搭建的vue项目里面已经有了一个static文件夹，用于存放静态文件。 一、将favicon图片放到该文件夹下，然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"> 刷新浏览器就会更新。 二、如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中： new HtmlWebpackPlugin({ fi
设置网址前的小图标
关于代码的那些事
04-27 1105
link rel="icon" type="image/png" href="favicon.png"/>
vue3.0 解决浏览器小图标 ico图标更换不了的问题 记录
weixin_42508580的博客
03-09 1465
vue3设置ico图标审查元素显示如下 <!--[if IE]><linke rel="icon" herf="logo.ico" /><![endif]--> 解决方法 index.html <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpor
link rel="icon" href="favicon.ico"浏览器显示图标
ppwwp的专栏
10-11 1万+
用于在浏览器地址栏里显示的图片 这样写了后，在浏览器的地址栏里，图片会显示成你给的路径的这个图片，不过貌似这个路径不能改，只能是网址根目录下的favicon.ico文件，而且现在好像不用写这个，只要根目录下有这个文件，浏览器会自动读取出来并显示。 ...
vue-cli3.0中vue.config.js配置（自行整理）
sanlyshi's front-end road
03-01 4315
// 打包去掉console const TerserPlugin = require('terser-webpack-plugin'); module.exports = { // 查阅https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config // 项目部署的基础路径,我们默认假设你的应用将会部署在域名的根部，比如http...
vue中 favicon.ico正确显示教程
女神修炼日记
04-12 1万+
首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。方法一：修改index.html文件&lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/&gt;方法二：修改webpack配置文件        1、找到build下的webpack.dev.conf.js文件new HtmlWebpack...
Vue学习第35天——模拟项目上线基本流程
背心的博客
10-04 2436
模拟Vue项目上线基本流程
vue项目打包上线后接口地址报错问题
热门推荐
imkxrc的博客
06-11 2万+
 代理设置的作用是你要访问后端的请求直接发到当前站点，因此你的 api 路径都应该是不含 hostname 的相对路径部署到生产环境时，只要相对路径保持不变，就不需要任何设置。如果开发环境下的 api 路径和生产环境的路径不一致，那么一定可以通过设置 proxyTable 使之一致。因此，结论是，只要 proxyTable 设置得好，部署上线不需要做任何改动。...
快速搭建Vue前端项目：vue-element-admin实践
在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并了解其基本目录结构和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值