vue-cli 3.0 脚手架配置记录

一/ 在2.X中静态资源文件放在static文件夹中，此文件夹里的东西不会被webpack打包，而在3.X中没有该文件，于是我在根目录新建了一个static文件夹存放reset.css文件，出现了在index.html引入reset无效的问题，经过查资料发现3.X中的public文件夹类似于2.X里的static，最终把reset文件放入public文件夹中成功引入

• 注意：public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件
• vue2.x版本相关参考文章1
• vue2.x版本相关参考文章2
• vue2.x版本相关参考文章3
• vue2.x版本相关参考文章4

二/ 启动服务后自动打开浏览器vue.config.js配置

module.exports = {
    devServer: {
        open: true,  //npm run serve 后自动打开浏览器
    }
}

三/ 跨域请求的vue.config.js配置

module.exports = {
    proxy: {
        '/api': { //匹配所有以‘/api’开头的请求路径
             target: 'http://localhost:4000', //代理目标的基础路径
             changeOrigin: true, //支持跨域
             pathRewrite: { //重写路径：去掉路径中开头的'/api'
                 '^/api': ''
             }
        }
    }
}

proxy配置

四、项目中使用async获取promise对象传过来的值，在npm run build打包时报以下错误

说是需要 @babel/plugin-syntax-dynamic-import插件，
而且在webpack官网上也有特别说明：

由于 import() 会返回一个 promise，因此它可以和 async 函数一起使用。但是，需要使用像 Babel 这样的预处理器和Syntax Dynamic Import Babel Plugin。

@babel/plugin-syntax-dynamic-import

安装：

npm install --save-dev @babel/plugin-syntax-dynamic-import

推荐使用
在babel.config.js中做如下配置

"plugins": ["@babel/plugin-syntax-dynamic-import"]

五、既能localhost访问又能手机IP访问
修改vue.config.js文件下的host：

devServer: {
        host: '0.0.0.0'
    }

然后修改package.json中script下dev的值，在后面加入–host 0.0.0.0

"scripts": {
    "dev": "--host 0.0.0.0",
  },

六、vue项目上线后其他浏览器都能正常运行，但是微信浏览器白屏，网上查完资料后，猜测应该是ES6转ES5出了问题：

使用 es6-promise：

npm install es6-promise -S

// 在 main.js 首行引入即可
require("es6-promise").polyfill()

使用 babel-polyfill：
在main.js中引入（有人说要在最上面引入）

import 'babel-polyfill'

或者在vue.config.js中配置

chainWebpack: config => {
        config
            .entry('./src/main.js')
            .add('babel-polyfill')
            .end()
    }  

另外我还在babel.config文件中做了配置

"presets": [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ],