公司网站怎么弄,安徽专业网站建设检修,上海金融网站建设,如何查看一个网站是什么程序cms做的1. 简介
在现代前端开发中#xff0c;Vue.js因其简洁、灵活和高效的特点#xff0c;已经成为许多开发者的首选框架。
在Vue项目中#xff0c;打包部署和路由懒加载是两个非常重要的环节。
打包Vue项目是为了将源代码转换为浏览器可以解析的JavaScript文件#xff0c;以便…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/categoryimport 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)
