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

这篇具有很好参考价值的文章主要介绍了Vue项目的打包方式(生成dist文件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、相关配置

情况一(使用的工具是 vue-cil)

情况二(使用的工具是 webpack) 

二、打包 


一、相关配置

情况一(使用的工具是 vue-cil)

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

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

        结构如下:

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

情况二(使用的工具是 webpack) 

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

assetsPublicPath: './'

        结构如下:

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

二、打包 

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

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

        成功后会有如下提示;

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

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

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

        dist 文件夹就是我们需要的包,随后放至服务器部署上线即可;需要注意打包之后无论在项目中做了何种修改,都需要 npm run build 重新打包。文章来源地址https://www.toymoban.com/news/detail-406357.html

到了这里,关于Vue项目的打包方式(生成dist文件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue打包后dist文件在本地启动运行

    vue项目开发好后,想在本地运行测试最后的打包文件可以通过http-server来启动。步骤如下: 命令截图 最后在浏览器输入:127.0.0.1:9007就可以查看了

    2024年02月12日
    浏览(50)
  • 前端自测运行vue打包后的dist文件

    在Vue项目中,dist目录是代码打包之后生成的文件夹,其中包含了静态资源文件和打包后的JavaScript、CSS等文件。如果要在本地运行打包后的项目文件,可以使用简单的静态服务器来启动。 下面介绍一种使用Node.js中的http-server模块搭建本地服务器的方法: 先查看是否安装node 如

    2024年02月06日
    浏览(41)
  • 已经打包好了的vue dist文件夹,如何用electron打包成exe桌面应用

    先在项目根目录下(非dist根目录)安装electron electron-packager 再在项目根目录下(非dist根目录)安装electron-packager 然后在dist文件夹下创建main.js文件,内容为 再创建一个文件package.json 在非dist文件夹(注意,是非dist文件夹,就是原本没打包的项目文件里)的package.json文件里,改

    2024年02月19日
    浏览(53)
  • 前端打包后生成的dist 或 build目录,如何在本地启动服务运行

    前端打包后生成的dist/build目录,如何在本地启动服务运行 运行 npn run build ,会打包后会产生 dist 或 build 目录 一般情况下,直接打开dist 或 build 目录下的 index.html 会在浏览器看到内容。 然而发现网页一片空白,打开了控制台,看到一片404的各种找不到资源,或者出现跨域的

    2024年02月02日
    浏览(49)
  • 前端build打包生成的dist使用 nginx 运行接口报错405和401问题。

            dist 目录是一个包含了打包后的项目代码和相关依赖项的目录,用于在部署时将项目移植到其他环境中。它提供了一个整理而简化的文件结构,使得部署过程更加方便和可靠。         直接打开报错会空白可以使用 nginx 来启动。Nginx 官方网站:nginx news 下载很快很方

    2024年01月21日
    浏览(46)
  • vue 中import 不同层级目录下的文件的表示方式

    项目背景: vue 项目中开发页面 需要 用到其它目录下的 文件,需要使用 import 进行导入 问题: 解决方案: 一、 import 同一目录下的文件 import MyComponent from ‘./MyComponent.vue’; 二、import 上一级目录文件的方法 vue 中import 上两级的文件 在Vue中导入上两级的文件可以使用相对路径

    2024年01月15日
    浏览(51)
  • .net core 生成项目时.json配置文件没有复制到输出目录

    在程序运行时默认加载.exe文件同文件夹下的配置文件,而不是项目中的.json配置文件,所以需要把.json配置文件设置到自动生成目录,即下图所示:

    2023年04月13日
    浏览(55)
  • vue +WebSDK_V3.3.0/本地调试和打包成dist部署还有所不同!!

    1.在index.html中引入js文件 2.在vue中使用需要修改webVideoCtrl.js文件中引入jsVideoPlugin-1.0.0.min.js的方式如下 在使用到页面中 html js 小小功能整了一天:记住以下要点 1.在网上找了几篇文章cv的时候在index.html以内的文件名错了。。。。离离原上谱,,, 2.最开始后端大哥教我 无需安

    2024年03月13日
    浏览(49)
  • uniApp h5项目通过命令行打包,并生成指定路径、文件名称

    第一步:采用hbuilder新建一个项目 第二部:通过cli新建一个项目 创建命令: 创建成功之后先运行一下项目,如果启动失败 Error: Cannot find module ‘webpack/lib/RuleSet‘ 我们将hb的项目作为基础 回到主题,将hb项目作为基础, 第一步:新建src文件夹,将以下文件放入src文件夹中  第

    2024年02月07日
    浏览(41)
  • vue3:3、项目目录和关键文件

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包