Vue-cli配置打包文件本地使用的教程图解

最近做的一个嵌入app的pc端项目，用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件，打包后的index.html加载文件如图：


url中的路径据我们所知，最前面为一个反斜杠（/XX），表示从网站根目录开始搜索文件，如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头，看来是打包后的文件路径有问题

于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置，最常用的有fileName、path属性，指定输出文件的名称和在项目中的位置，publicPath可以为项目中的所有资源指定一个基础路径，也是我们解决这个问题的关键

官方文档：webpack output

如图：

可以看到publicPath属性中有个三元运算，process.env.NODE_ENV又是个什么呢？

precess对象是一个全局变量，可以在应用程序中全局使用的（包括业务页面），
process.env属性返回一个包含用户环境信息的对象，
process.env.NODE_ENV就是用来定义环境变量，一般包括production(生产环境)、development(开发环境)，我们在webpack中的各种配置也是根据环境变量来做相应处理。

既然是对生产环境的文件做处理自然是去找config.build对象，这个时候就来到config文件夹下找相关配置了


index.js文件中输出两个对象（dev、 build）, 在build对象中更改assetsPublicPath为'./'或者空字符串都行，这时候执行下打包命令 npm run build，在浏览器中打开dist文件夹下的index.html

哈哈，文件加载过来了，但是，css文件中引的font文件路径加载不到，来看看这个时候font文件的路径

由于我用了相对当前文件夹的路径，此时的url就是相对当前css文件所在目录的，此时dist文件夹结构如图：

我想到的解决办法是对font文件的输出做单独处理，还是webpack.base.config.js文件，

更改font文件的输出路径，好了，npm run build

铛啷啷，加载出来了。

总结

以上所述是小编给大家介绍的Vue-cli配置打包文件本地使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解webpack+vue-cli项目打包技巧

    详解webpack+vue-cli项目打包技巧

    1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串 以上就是本文的全部内容,希望对

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • 基于vue-cli 打包时抽离项目相关配置文件详解

    前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需要对这些配置文件进行抽离,不让webpack把配置文件也进行编译. 首先,我们需要在/static 下面新建一个js文件作为配置文件 里面的内容如下: window.g={ AXIOS_TIMEOUT:10000, SERVICE_CONTEXT_PATH:`http://10.200.199.84

  • Vue-cli配置打包文件本地使用的教程图解

    最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

  • Vue在外部配置打包文件夹名称和url地址前缀

    Vue在外部配置打包文件夹名称和url地址前缀

    在public中添加以下两个js文件 config_build.js: module.exports = { //打包文件夹名 OUTPUT_DIR: 'test', //浏览器url地址前缀.需要同步更改config_settings.js中的ROUTE_PREFIX ROUTE_PREFIX: '/test/' } vue.config.js: const config_build = require('./public/config_build') module.exports = { p

  • vue/cli 配置动态代理无需重启服务的操作方法

    vue/cli 配置动态代理无需重启服务的操作方法

    vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板. vue/cli 配置动态代理,无需重启服务 devServe = http://localhost:3000; prodServe = http://localhost:4000; 1. 在vue.config.js文件中,配置代理服务 使用vue/cli@5创建的项目,默认会创建vue.config.js文件,如果项目中没有此文件,那

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • Pycharm中配置远程Docker运行环境的教程图解

    捣鼓了一天一直报错:Error running 'mypython': Can't run remote python interpreter: the working directory 'C:\Users\admin\Desktop\dc' is invalid, it needs to be an absolute path 首先咱们得搞清楚,pycharm连接docker的原理 Step 1: 打开pycharm连接docker ,记得打开远程2375端口 Step 2:连接远程dock

  • 如何配置关联Python 解释器 Anaconda的教程(图解)

    首先先安装好我们的Python 这里就不多介绍了 1.打开python.exe: 点击File 下的小扳手图标 Settings- 2.打开设置界面: 我们点击Project 这一栏下的 Project Interpreter 之后我们点击红色小方框 的小箭头 3.选择环境变量: 我们选择已有的两个环境变量中的其中一个 Python 3.7 点击下方的 Apply 等他加载成功后 我们点击OK 就完成了. 4.选择环境变量:另一种情况 我们发现下拉列表中没有可选择的环境变量时,点击右边的小齿轮,

  • vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)

    vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)

    找到nginx多网站配置文件:类似 nginx/sites-available/www.baidu.com server { listen 80; index index.html index.htm index.nginx-debian.html; server_name www.baidu.com; location / { root /mnt/www/www.baidu.com; try_files $uri $uri/ /index.html; } } 参考页面:https://rout

  • Visual Studio Code配置C/C++开发环境的教程图解

    VS code的环境配置真是要了我的老命-- 初始配置 1.前往官网下载VS code并安装 官网链接:https://code.visualstudio.com 2.下载mingw64 官网链接:http://mingw-w64.org/doku.php 自行选择合适的系统版本进行下载 下载后将bin目录添加到环境变量中 3.安装扩展 如果看不习惯英文,可以安装中文包扩展 安装C/C++扩展 调试运行环境 1.新建一个CPP文件 2.创建launch.json文件 选择编译按钮->自定义运行和

  • 浅谈Vue CLI 3结合Lerna进行UI框架设计

    当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

随机推荐