练手项目完结打包的时候遇到一些问题,特此记录

先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这些配置貌似就够了

module.exports = {

  // webpack配置,此处是因为我的项目打包时报错(WARNING in asset size limit: The following asset(s) exceed the recommended size limit ,因此有了这个webpack配置,若不存在静态资源过大,可不要这部分代码)
configureWebpack: {
// 警告 webpack 的性能提示
performance: {
hints: 'warning',
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function (assetFilename) {
return assetFilename.endsWith('.js');
}
}
},
baseUrl: './',
// 1.默认为 "/":部署在一个域名的根路径上 ; 2. "./":所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径
outputDir: 'dist',
// 默认为 "dist",指打包后的资源放置的路径,放在dist文件夹下
assetsDir: 'static',
// 默认为:'' ,放置打包后生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
indexPath: 'index.html',
// Default: 'index.html' ,指定生成的 index.html 的输出路径 (相对于 outputDir)
filenameHashing: true,
// Default: true ,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
// pages:undefined,//在 multi-page 模式下构建应用
lintOnSave: true,
// Type: boolean|'error';Default: true; true:将 lint 错误输出为编译警告;'error':错误输出会导致编译失败
runtimeCompiler: false,
// Default: false, 设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右
// transpileDependencies:[],//Default: [], 默认情况下 babel-loader 会忽略所有 node_modules 中的文件
css: {
modules: false,
// Default: false, 设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
sourceMap: false // Default: false, 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
},
// productionSourceMap:{ type:Bollean,default:true } 生产源映射
// 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
productionSourceMap: false,
// devServer:{type:Object} 3个属性host,port,https // 以下为跨域配置(跨域是在开发时用到的,项目打包后是不需要配置跨域的),简单介绍下这里跨域配置的意思,我在本地开发的时候地址为localhost:8088,但是服务器的端口为localhost:80,要访问服务器的上的数据,就要跨域。将‘/MVS’代理为服务器的地址
devServer: {
port: 8088, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器
// 配置跨域处理,只有一个代理
proxy: {
'/MVS': {
target: 'http://127.0.0.1:80/',
ws: false, //为true会让websocket默认连接
changeOrigin: true,
pathRewrite: {
'^/MVS': '/MVS' // 重写接口访问
}
},
'/foo': {
target: '<other_url>'
}
} // 配置多个代理
}
};

然后记录下遇到的问题:

首先是打包警告:WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

出现这个问题后,启动服务器,访问localhost时页面出不来,

解决办法是加入那部分webpack配置代码

然后第二个问题是:

Failed to load resource: the server responded with a status of 404 (Not Found)
解决办法是加baseURL配置就行了
baseUrl: './',
要注意的是,baseURL配置和publicPath的配置会冲突,如果两者都存在会直接忽略baseURL,因此我直接删除了publicPath的配置

vue项目打包文件配置(vue-clli3)的更多相关文章

  1. vue项目打包,生成dist文件夹,如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  2. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  5. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  6. vue项目打包-2-九五小庞

    vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...

  7. vue项目打包成html,在本地点击直接能打开

    默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...

  8. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  9. vue项目工具文件utils.js javascript常用工具类,javascript常用工具类,util.js

    vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...

随机推荐

  1. centos7修改默认启动模式(图形/命令行)

    centos7以后是这样的,7以前就是别的版本了 1.systemctl get-default命令获取当前模式 2.systemctl set-default graphical.target 修改 ...

  2. go命令行参数

    go命令行参数例子: package main import( "fmt" "os" "strings" ) func main(){ wh ...

  3. ActiveMQ的作用总结(应用场景及优势)以及springboot+activeMq 实战

      业务场景说明: 消息队列在大型电子商务类网站,如京东.淘宝.去哪儿等网站有着深入的应用, 队列的主要作用是消除高并发访问高峰,加快网站的响应速度. 在不使用消息队列的情况下,用户的请求数据直接写入 ...

  4. js实现简单的文件上传

    文件下载:https://www.cnblogs.com/xiaomili/p/10521160.html  html: <form name="form1" id=&quo ...

  5. Rancher-k8s加速安装文档

    Kubernetes是一个强大的容器编排工具,帮助用户在可伸缩性系统上可靠部署和运行容器化应用.Rancher容器管理平台原生支持K8s,使用户可以简单轻松地部署K8s集群. 很多同学正常部署k8s环 ...

  6. [Spark] Spark 3.0 Accelerator Aware Scheduling - GPU

    Ref: Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU) 预览版本:https://archive.apache.org/dist/spark/spark-3.0.0-p ...

  7. Topic与Partition

  8. MATLAB学习(七)求解优化问题:线性规划 非线性规划 拟合与插值 多目标规划

    Minf(x)=-5x1  -4x2  -6x3                x1   -x2    +x3  <=20              3x1  +2x2 +4x3 <=42 ...

  9. 一起学习linux环境的git

    第一节 GIT最初是由Linus Benedict Torvalds为了更有效地管理Linux内核开发而创立的分布式版本控制软件,与常用的版本控制工具如CVS.Subversion不同,它不必服务器端 ...

  10. 线程结束,GetExitCodeThread后结束值一直STILL_ACTIVE,259的问题

    最近在用VC++编写一个视觉检测系统,其中开的线程比较多.知道线程什么时候结束是很重要的一个问题.其中用到了GetExitCodeThread()函数.函数原型如下: BOOL GetExitCode ...