修改vue+webpack run build的路径方法


Posted in Javascript onSeptember 01, 2018

vue项目用webpack打包想要修改静态资源路径等,找到项目根目录下的config文件夹,打开该文件夹下的index.js文件,默认如下:

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
 env: require('./dev.env'),
 port: 8080,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false
 }
}

其中build.index:必须是本地文件系统上的绝对路径。会生成index.html文件。

build.assetsRoot:必须是本地文件系统上的绝对路径。

build.assetsSubDirectory:编译出来的资源文件。

build.assetsPublicPath:【资源的根目录】,这是通过http服务器运行的url路径。默认情况下,是根目录(/)。如果后台对静态资源url前缀要求,则需要改变这个路径。

build.productionSourceMap:在构建生产环境版本时是否开启source map。

以上这篇修改vue+webpack run build的路径方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery each()小议
Mar 18 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
理解Javascript的call、apply
Dec 16 Javascript
vue.js路由跳转详解
Aug 28 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 #Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 #Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 #Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 #Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 #Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 #Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 #Javascript
You might like
php图片的二进制转换实现方法
2014/12/15 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
实例讲解PHP表单
2020/06/10 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
学习python可以干什么
2019/02/26 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
机械设计制造专业个人求职信
2013/09/25 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Golang 遍历二叉树
2022/04/19 Golang
Redis批量生成数据的实现
2022/06/05 Redis
Redis实现分布式锁的五种方法详解
2022/06/14 Redis