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
25.本地搭建服务器,模拟项目上线
npx express server-app 创建服务器(npx 是安装node之后自带的一个指令) cd server-app yarn / cnpm i yarn start
可以将打包出来的vue的项目的文件夹拷贝到 当前项目的 public 目录内部
通过 http://localhost:3000/sz2108-vue/ 就可以在服务器的环境下访问项目