网站开发 案例详解vi设计公司
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/#publicpathpublicPath: './',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')