vue脚手架public放哪些内容

这篇文章主要介绍“vue脚手架public放哪些内容”，在日常操作中，相信很多人在vue脚手架public放哪些内容问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue脚手架public放哪些内容”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ public文件夹中一般放置一些静态资源（图片），在webpack进行打包的时候，会原封不动的打包到dist文件夹中。public目录下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录（默认是dist/static）下；必须使用绝对路径引用这些文件，这个取决于你“vue.config.js”中publicPath的配置，默认的是“/”。1、第一步（仅第一次执行）：全局安装@vue/cli

npmi@vue/cli-g

2、切换到要创建项目的目录，然后创建项目

vuecreateXXX

3、启动项目

npmrunserve

备注：1、npm淘宝镜像地址

npmconfigsetregistryhttps://registry.npm.taobao.org

2、Vue脚手架隐藏了所有webpack相关配置，若要查看执行

vueinspect>output.js

node_modules文件夹：项目依赖文件夹public文件夹：一般放置一些静态资源（图片）。值得注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过
设置链接前缀：

favicon.ico">

在模板中，你首先需要向你的组件传入基础 URL：

data(){
return{
publicPath:process.env.BASE_URL
}
}

然后：

何时使用 public 文件夹你需要在构建输出中指定一个文件的名字。你有上千个图片，需要动态引用它们的路径。有些库可能和 webpack 不兼容，这时你除了将其用一个独立的vue-cli3.0有两个放置静态资源的目录分别是public和assets。public放不会变动的文件（相当于vue-cli2.x中的static）
public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这个取决于你vue.config.js中publicPath的配置，默认的是/。assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。简单来说就是就是public放别人家js文件（也就是不会变动），assets放自己写的js文件（需要改动的文件）src文件夹assets文件夹：一般用于存放静态资源（放置多个组件共用的静态资源），值得注意，放在在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。components文件夹：一般放置非路由组件（全局组件）App.vue：唯一的根组件（汇总所有组件）main.js：入口文件，也是整个程序当中最先执行的文件.gitignore:git版本管制忽略的配置（一般不碰）babel.config.js：babel的配置文件（相当于翻译官，比如把ES6相关语法翻译为ES5，兼容免费云主机、域名性更好，一般不碰）package.json：应用包配置文件（类似于项目身份证，记录着项目名称、项目依赖、项目运行等信息）package-lock.json：包版本控制文件（缓存性文件）README.md：应用描述文件（说明性文件）vue.config.js：可以对脚手架进行个性化定制，如何配置可以参考Vue CLI其他文件夹：pages文件夹：存放路由相关组件（pages也可换成views）router文件夹：路由配置文件store文件夹：vuex相关文件mock文件夹：存放mock模拟数据vue-cli脚手架环境：基于node + webpack来支撑我们写vue项目默认入口文件main.js：所有代码都要和main.js产生直接或间接的引入关系打包过程：执行打包的时候，webpack会根据入口的引入关系来构建代码地图，把相关的代码用加载器/插件翻译处理，输出到.js文件中，插入到index.html中运行① main.js → 打包运行入口② Vue.component(“组件名”,组件对象) → 给Vue注册一个全局组件执行顺序：通过main.js文件先注册全局组件，然后是组件内使用这个全局组件。到此，关于“vue脚手架public放哪些内容”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 2023年广芯微，用心创“芯”产品发布会暨合作伙伴大会

在MCU芯片平台的发展上，广芯微结合市场需求，开发一系列差异化、特色化的32位MCU产品，包括CoreMark 1076分，支持312MHz主频的高性能Cortex-M4芯片UM32H47x，针对双电阻/三电阻FOC控制需求的UM32G42x，适用于单电阻FO…