欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue项目的打包详解和配置文件

程序员文章站 2022-06-15 23:11:44
项目打包一、项目打包指令把vue项目进行打包发布,生成可以在web服务器中进行访问的网页npm run build二、详解我们写的.vue文件是源代码,是不能被浏览器解析的我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器,会把把我们写的vue文件进行编译运行.vue文件在开发的时候能够在浏览器被访问到,是因为有webpack的存在webpack是一个前端模块化开发工具,可以实现模块化...

项目打包


一、项目打包指令

  • 把vue项目进行打包发布,生成可以在web服务器中进行访问的网页
npm run build

二、详解

  • 我们写的.vue文件是源代码,是不能被浏览器解析的
  • 我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候
  • cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器,会把把我们写的vue文件进行编译运行
  • .vue文件在开发的时候能够在浏览器被访问到,是因为有webpack的存在
  • webpack是一个前端模块化开发工具,可以实现模块化开发和临时的开发服务器
  • .vue文件能够被webpack加载,是因为vue-loader插件的功劳
  • webpack内置了很多插件(加载器),作用是解析不同的文件类型

三、配置文件

  • vue.config.js
    是vue脚手架的配置文件,这个是用来配置vue项目的
    https://cli.vuejs.org/zh/config/
    里面有很多配置,当时用得上的最多的就是这个 publicPath
    publicPath的作用是设置一下当前项目发布之后静态资源引入的路径,一般设置为./
module.exports = {
  publicPath: './' // 设置当前项目发布时候静态资源引入的路径
}
  • .eslintrc.js

    是eslint代码规范性检测的配置文件

  • .editorconfig

    是编辑器代码书写的配置文件

  • .prettierrc

    是prettier代码格式化插件的配置文件

本文地址:https://blog.csdn.net/Black_snow_ji/article/details/107323559