Vue项目部署到服务器上的一系列问题（Nginx）？

最新推荐文章于 2025-03-20 10:26:49 发布

Roben_

最新推荐文章于 2025-03-20 10:26:49 发布

阅读量651

点赞数

分类专栏：项目实践文章标签： vue.js webpack 前端

本文链接：https://blog.youkuaiyun.com/Roben_/article/details/117425643

版权

项目实践专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过路由懒加载来提升Vue项目的加载速度，避免首页加载时间过长。同时，通过CDN引入关键库文件以减小项目体积。针对npm run build后生成的.map文件问题，可在vue.config.js中设置productionSourceMap为false。对于Nginx服务器，配置文件中添加重定向规则，解决刷新404错误。

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

Vue项目部署到服务器上慢怎么办（Nginx）？

一、路由懒加载

一、路由懒加载

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

路由懒加载方式

在这里插入图片描述
参考：https://blog.youkuaiyun.com/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问题
  }