详解Vue项目的打包方式

目录
  • 一、相关配置
    • 情况一（使用的工具是 vue-cil）
    • 情况二（使用的工具是 webpack）
  • 二、打包
  • 总结

一、相关配置

情况一（使用的工具是 vue-cil）

如果是用 vue-cli 创建的项目，则项目目录中没有 config 文件夹，所以我们需要自建一个配置文件；在根目录 src 下创建文件 vue.config.js，需注意文件名称必须是 vue.config.js，然后在文件中插入以下代码：

//打包配置文件
module.exports = {
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
};

结构如下：

情况二（使用的工具是 webpack）

如果使用的是 webpack，则直接在 config 中 index.js 文件下修改 webpack 配置：

assetsPublicPath: './'

结构如下：

二、打包

配置完成之后，调起控制台，输入打包命令 npm run build 开始打包；

成功后会有如下提示；

且会在项目目录自动生成 dist 文件夹；

dist 文件夹就是我们需要的包，随后放至服务器部署上线即可；需要注意打包之后无论在项目中做了何种修改，都需要 npm run build 重新打包。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vue.js打包项目后页面出现空白的解决办法

    vue.js打包项目后页面出现空白的解决办法

    相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且

  • vue项目打包发布上线的方法步骤

    vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

  • Vue项目优化打包之前端必备加分项

    Vue项目优化打包之前端必备加分项

    目录 前言 一.路由懒加载 1. 为什么需要路由懒加载 2. 如何实现路由懒加载 3. 路由懒加载中的魔法注释 二.分析包大小 1. 需求 2. 如何生成打包分析文件 三.webpack配置排除打包 1. 需求 2. 排除打包 四. 引用网络资源 1. 需求 2. CDN 3. 实现步骤 五. 打包去除console.log 1. 需求 2. 代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • Vue项目优化打包详解

    Vue项目优化打包详解

    目录 前言 一.路由懒加载 1.为什么需要路由懒加载 2.如何实现路由懒加载 3.路由懒加载中的魔法注释 二.分析包大小 1.需求 2.如何生成打包分析文件 三.webpack配置排除打包 1.需求 2.排除打包 四. 引用网络资源 1.需求 2.CDN 3. 实现步骤 五. 打包去除console.log 1.需求 2.代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • 详解Vue项目的打包方式

    详解Vue项目的打包方式

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 总结 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'sta

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • 详解Vue+elementUI build打包部署后字体图标丢失问题

    错误描述: Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(

  • 详解vue项目的构建，打包，发布全过程

    详解vue项目的构建，打包，发布全过程

    很多朋友对于VUE项目的一系列流程不熟悉,小编根据网友提出的问题,整理了关于vue项目的构建打包发布全过程,希望对你有用. 一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run bui

  • 详解vue项目构建与实战

    详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • 详解vue项目打包步骤

    详解vue项目打包步骤

    终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下: 1.查看package.js文件的scripts命令 2.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件 3.其中dev是开发环境,build是构建版本,找到build下面的assetsPu

  • 详解vue静态资源打包中的坑与解决方案

    本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

随机推荐