HbuiderX 打包Vue-cli3项目遇到的问题小结

HbuiderX 打包Vue-cli3项目遇到的问题小结

小白一只，最近做了一个简单的vue-cli3的h5应用，在打包时遇到了一些问题，在网上看了很多的博客，也在b站上看了视频，总结一下解决方法。

一、npm run build时运行错误：UnhandledPromiseRejectionWarning

在npm run build时出现如下错误（仅报错提示开头部分代码），可以猜到是css编译错误

Error processing file: static/css/app.177e6d2d6d0941286b88c12c8a54f11f.css
(node:13952) UnhandledPromiseRejectionWarning:CssSyntaxError

看了好多大佬的回答，尝试解决，已经检查过项目代码中css，没有用//注释的样式

1.在webpack.base.conf.js 关闭eslint检查

const createLintingRule = () => ({
  // test: /\.(js|vue)$/,
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

重新npm run build，不行，还是报那个错，继续找方法，看到另一位大佬说在build.js里可以加上以下代码来查找错误

2.捕捉错误，build.js

process.on('unhandledRejection', error => {

      console.error('unhandledRejection', error);
  
      process.exit(1)// To exit with a 'failure' code
  
  });

嗯，打印了一大串内容，还是没有具体的错误位置，但观察了打印内容，发现有些样式是我没写过的，判断可能是我新建项目后，引入了一些网上下载下来的样式文件出错了。查找了项目引入的样式文件，发现引入了一个mixin.styl，删除这个文件后再npm run build ，成功了

二、build后生成的index.html运行时是一片空白

build后生成的dist文件夹如下：

修改了config下的index.js，重新build，页面有内容了

三、下载HbuilderX进行打包，出现"配置正在加载中"

所有能遇到的bug我都遇到了，小白太难了，继续解决
检查了打包时的配置，没有什么问题，然后竟然！我重启了HbuilderX，打包就没问题了，果然重启能解决一半以上的问题么

四、打包后的问题

开始在config里面加了根据当前环境，修改了dev.env.js和prod.env.js，再设置BASE_URL = process.env.VUE_APP_BASE_API

// dev.env.js
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VUE_APP_BASE_API:'"/api"'
})

// prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API:'"http://******"' //项目api地址
}

重新打包，运行时还是显示跨域问题，经过搜索，找到了解决办法
因为在后端设置的允许跨域的域名为“*”，所以前端不能携带cookie跨域

axios.defaults.withCredentials = false

不足之处，请各位大佬不吝赐教