请选择 进入手机版 | 继续访问电脑版

vue项目打包加运行

[复制链接]
钟启航 发表于 2021-1-1 18:32:44 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
打包 3.0 public的文件夹 都打包到根目次了
打包之后的设置
去vue.config.js
自己手动设置
publicPath:"./"
打包 2.0
config下的index.js
设置生产情况的路径 build
改成相对路径,
自己找路径
assetsPublicPath: ‘./’,
express静态托管打包后的dist文件

  1. var express = require('express');var app = express();var path = require('path')var mongoose = require('mongoose');静态托管打包后的dist文件app.use(express.static(path.join(__dirname, 'dist')))// app.use(express.static('./dist'))//bodyParser模块var bodyParser = require('body-parser');app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json())mongoose.connect('mongodb://localhost/blog')mongoose.connection.once('open', () => {    console.log('数据库毗连');    app.listen(9092, () => {        console.log('success');    })})app.all("*", function (req, res, next) {    // 跨域处置惩罚 cors 配景办理跨域    //允许的请求源    res.header("Access-Control-Allow-Origin", "*");    //允许的请求头    res.header("Access-Control-Allow-Headers", "*");    //允许的请求路径    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");    res.header("X-Powered-By", ' 3.2.1');    //允许的请求范例    res.header("Content-Type", "application/json;charset=utf-8");    next(); // 执行下一个路由})// http://localhost:3000/ajax// app.use('/ajax', createProxyMiddleware({ target: 'http://127.0.0.1:3000', changeOrigin: true }));// context: 界说哪些请求要被目标主机署理// options.target:目标主机 (协议+主机名)// 路由var api = require('./router/api.js')app.use('/api', api)
复制代码
本周作业



  • 信贷项目
前端打包



  • npm run build
    – package.json – vue-cli-service build
    – 发布到线上的代码,未便于调试
  • 打包发布到测试情况
    –增加打包下令 开发(后端地点) 测试(后端地点) 线上(后端地点)
    –npm run build:dev --开发调试情况
    –npm run build:prod --线上
打包的代码如何运行



  • 不能双击dist/index.html
  • 放到http容器运行 serve tomcat nginx iis
  • npm i -g serve
  • 启动打包后的目次 serve dist 访问:http://localhost:5000
打包指定差别的情况变量(开发,测试)

–npm run build:prod跟npm run build的区别是不是有没有压缩的区别?


  • 添加情况变量
    开发 在根目次添加.env.dev dev名称与package.json中的mode对应
    线上 在根目次添加.env.prod
    使用情况变量(process.env.NODE_ENV)
打包手动设置文件



  • vuecli4.x脚手架基于webpack
  • vuecli零设置, 不需要零设置可以指定vue.config.js(项目根目次)
  • 指定子域设置 publicPath
    如需要在http://www.baidu.com下加一个子域http://www.baidu.com/map
    则需要设置publicPath:’/map/’
    注意:打包后需要在dist中加一层目次map,把所有文件移入map目次 启动serve dist
打包压缩,大文件处置惩罚



  • 开发npm run build:dev 7.11mb
  • 线上npm run build:prod 1.8mb
  • 少了哪些文件? 注释, 空行, 压缩, 肴杂
  • 大文件 900k
  • 代码细分:三方vue,axios,elementui; 开发代码
  • 把三方的代码移撤消, 使用三方提供的cdn资源(免费 收费)
  • 找三方包cdn资源, 添加到public/index.html, 把代码中的from vue, vue.use()
    // import Vue from ‘vue’
    // Vue.use(ElementUI)
    在vue.config.js设置清除三方包
  • 通过减少三方包vue 打包后的js 1.74mb
gzip进一步压缩



  • compression-webpack-plugin
  • 设置vue.config.js
  • 打包会生成以gz末了的文件
  • 如何看欣赏是使用gzip
    欣赏器控制台 点开相关js文件
    请求头 Accept-Encoding: gzip, deflate, br
    响应头 Content-Encoding: gzip
    性能最大化
打包app



  • android ios
  • h5运行情况(五大欣赏器, 欣赏器内核(android ios), 小步伐)
  • 打包工具hbuildx
    创建一个app项目, 把dist目次文件复制到app目次下
    打开manifest.json, 获取唯一的id
    发行—原生app-云打包–选择android–使用Dcloud老版本证书–打包
    初次打包需要DCloud账号密码
  • 打包乐成后可以下载
  • mumu模拟器运行apk文件
    模拟器右下角—添加apk
  • 打包后的dist可以发布到服务器上 也可以打包成app
打包摆设模式



  • hash 打包后dist直接使用http容器运行 当地级线上相同
    路由中有#
    可以刷新页面
  • history 打包后通过http容器运行刷新会有404
    路由中没#
    不可以刷新页面
    办理:需要将前端与后端一起摆设,由后端负责跳转前端(在讲nodejs说明)
    可脚手架里可以刷新页面

来源:https://blog.csdn.net/qq_36262295/article/details/111956416
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )