打包上线、图片模块化

最新推荐文章于 2025-07-29 21:35:30 发布

猪皮惡霸

最新推荐文章于 2025-07-29 21:35:30 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

文章标签： webpack

本文链接：https://blog.youkuaiyun.com/typeof83/article/details/109732723

打包上线

npm run serve

启动一个web服务器
自动打包（开发环境的包，在内存中运行，不会生成实际文件）
启动后自动打开浏览器添加 --open 命令

npm run build

构建一个生成环境的包(上线的代码)
js css文件名添加哈希值的作用：解决缓存问题
vue.config.js中的配置项：

publicPath 配置公共资源的路径
js css引入路径问题，默认打包出来的是 ‘/’ 根目录(需要部署在服务器根目录)
js css引入使用使用相对路径 ‘./’ (部署在服务器某个子目录下)

<img src="/b1.jpg" alt="">
这种图片引入方式在打包时，webpack不做任何处理，直接拷贝到项目根目录
<img src="../../assets/img/loading4.gif" alt="">
这种图片引入方式在打包时，webpack会做一些处理（添加哈希值，放到项目中的某个文件夹中）
<img src="https://yanxuan.nosdn.127.net/9d8114ce4ef435ceac5e82120efeec4c.png" alt="">
这种图片引入方式在打包时，webpack不做任何处理，代码的一部分
通过背景图引入图片，和引入public和assets中的图片一样，不推荐
通过模块化管理图片，推荐

// img.js
import ld4 from './img/loading4.gif'
import ld5 from './img/loading5.gif'
import ld6 from './img/loading6.gif'
// 开发环境的基础路径
let baseUrl = '/'
// 生产环境的基础路径
// let baseUrl = './'
// 使用了七牛加速服务的基础路径
// let baseUrl = 'https://www.qiniu.com/qf/webapp/'

export default {
  b1: baseUrl + 'b1.jpg',
  b2: baseUrl + 'b2.jpg',
  ld4,
  ld5,
  ld6,
  wyyx1: 'https://yanxuan.nosdn.127.net/e21381b7e1e7caebbe72488db9542163.gif',
  wyyx2: 'https://yanxuan.nosdn.127.net/9d8114ce4ef435ceac5e82120efeec4c.png'
}

选择history路由模式的配置

const router = new VueRouter({
  routes,
  // mode: 'hash',//默认模式
  mode: 'history',
  base: '/dist/'
})

history路由模式的nginx配置
location /dist {
try_files $uri $uri/ /dist/index.html;
}
所有访问地址中有/dist的访问，统一放回服务器根目录下的dist目录中的index.html
配置数据请求代理