vue-项目打包、配置路由懒加载

本文介绍: 在现代前端开发中，Vue.js因其简洁、灵活和高效的特点，已经成为许多开发者的首选框架。在Vue项目中，打包部署和路由懒加载是两个非常重要的环节。打包Vue项目是为了将源代码转换为浏览器可以解析的JavaScript文件，以便在服务器上部署和用户端加载。

1. 简介

在现代前端开发中，Vue.js因其简洁、灵活和高效的特点，已经成为许多开发者的首选框架。

在Vue项目中，打包部署和路由懒加载是两个非常重要的环节。

打包Vue项目是为了将源代码转换为浏览器可以解析的JavaScript文件，以便在服务器上部署和用户端加载。

2. 项目打包

项目打包

yarn build
// 或
npm run build

注：打包后的文件会生成在dist目录下。

配置publicPath

在文件vue.config.js中，添加publicPath配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 设置获取.js,.css文件时，是以相对地址为基准的。
  // https://cli.vuejs.org/zh/config/#publicpath
  publicPath: './',
  transpileDependencies: true
})

注：配置为相对路径

publicPath介绍

在 Vue 项目中，publicPath 是一个 Webpack 配置选项，用于指定资源文件的公共路径。这个路径主要用于构建生产环境的应用程序。

配置 publicPath 的主要作用如下：

资源定位：当你的资源文件（如 JavaScript、CSS、图片等）被打包后，它们会被放在指定的目录下。通过设置 publicPath，你可以确定这些资源文件在网络上的位置。
CDN 部署：如果你使用 CDN 来部署你的资源文件，publicPath 可以帮助你指定 CDN 的 URL 作为资源的基础路径。这样，当应用程序运行时，它会自动从 CDN 加载资源。
资源重定向：在某些情况下，你可能希望将请求重定向到其他服务器或路径。通过配置 publicPath，你可以实现这种重定向逻辑。
构建输出目录：publicPath 也可以指定构建输出文件的目录。默认情况下，Webpack 会将构建后的文件输出到 dist/ 目录下。通过设置 publicPath，你可以更改这个目录结构。

例如，假设你的项目部署在 https://example.com/my-vue-app/ 下，并且你想将资源文件放在该路径的子目录 static/ 下，你可以这样配置 publicPath：

// webpack.config.js  
module.exports = {  
  // ... 其他配置 ...  
  output: {  
    publicPath: '/my-vue-app/static/'  
  }  
};

这样，当你的应用程序运行时，它会自动从 https://example.com/my-vue-app/static/ 加载资源文件。

3. 配置路由懒加载

路由懒加载 & 异步组件，不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件

官网链接

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

将src/router.index.js中注入的路由；需要异步加载的路由配置为异步：

import Home from '@/views/layout/home'
import User from '@/views/layout/user'
import Cart from '@/views/layout/cart'
import Category from '@/views/layout/category'

import store from '@/store'

// 配置：异步组件
const Login = () => import('@/views/login')
const Layout = () => import('@/views/layout')
const Search = () => import('@/views/search')
const SearchList = () => import('@/views/search/list')
const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
const MyOrder = () => import('@/views/myorder')