vue-cli学习和debug配置

开发

浏览器兼容性

如果有依赖需要 polyfill，你有几种选择：

如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。
如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill。注意 es6.promise 将被默认包含，因为现在的库依赖 Promise 是非常普遍的。
如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify)：请使用 useBuiltIns: ‘entry’ 然后在入口文件添加 import ‘@babel/polyfill’。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

环境变量和模式

你可以替换你的项目根目录中的下列文件来指定环境变量：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

模式是 Vue CLI 项目中一个重要的概念，默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
可以通过传递 —mode 选项参数为命令行覆写默认的模式
“dev-build”: “vue-cli-service build —mode development”

只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUEAPP_SECRET)
除了 VUE_APP* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
NODE_ENV - 会是 “development”、”production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

静态资源处理

URL 转换规则

如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

1	<img src="~some-npm-package/foo.png" />

如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 projectRoot/src 的别名 @。(仅作用于模版中)

Debug 配置

效果：在 vscode 中的终端输出 Chrome 的控制台信息，可以在 vscode 中进行断点调试
首先需要安装插件 Debugger for Chrome
新增 Debug 配置项

{
        "name": "attach to chrome",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "address": "localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",    // 这个webRoot应该是指webpack打包js文件的目录
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }

启动 chrome，附加启动参数

1	google-chrome-stable --remote-debugging-port=9222

如果使用的是 vue-cli，需要在 vue.config.js 中添加相应配置，如

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
    ...
}