Vue项目部署到服务器上的一系列问题(Nginx)?

一、路由懒加载

如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

路由懒加载方式

在这里插入图片描述
参考:https://blog.csdn.net/xm1037782843/article/details/88225104

CDN引入

在/public/index.html中引入需要的组件(vue需要在elementui前引入)

	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>

引入后需要注释
router/index.js and main.js and element.js and axios.js等中使用过的import vue and so on…
有一些博主说需要修改webpack.base.conf.js(大概叫这个名字),但是我用了vue-cli3,所以不需要修改那个配置文件

如果npm run build 后产生了一些.map文件

如果产生了一些.map文件,也会导致打包的文件过大,修改vue.config.js
加入一句代码,打包时就不会产生.map文件

productionSourceMap: false,

发布到服务器上后刷新404问题

之前用过apache服务器,需要在网站根目录建立一个.htaccess文件,建立一个网页的重定向
.htaccess文件内容

<IfModule mod_rewrite.c>
RewriteEngine On
   RewriteBase /

   RewriteRule ^index\.html$ - [L]

   RewriteCond %{REQUEST_FILENAME} !-f

   RewriteCond %{REQUEST_FILENAME} !-d

   RewriteRule . /htcm_front/index.html [L]

   </IfModule>

   注:/htcm_front/ index.html是你打包目录的名字

参考 https://segmentfault.com/a/1190000012548105.
但是用了Nginx都说好,毕竟轻量级,学生服务器太拉跨
Nginx需要修改配置文件nginx.conf

server
{
    listen 80;
    server_name 域名或者ip地址 like "test.com" or 12.345.32.123;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/html/dist;//网站根目录
     location / {
    root  /www/html/dist; //网站更目录
    index  index.html;
    try_files $uri $uri/ /index.html; //网页重定向,解决刷新后404问题
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Roben_

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

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

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

打赏作者

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

抵扣说明:

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

余额充值