vue-cli-v4.x开发配置

安装

1. vue create pro-name => cd pro-name => npm install 按住空格键选择或者取消选择，回车确认配置
2. vue ui

使用

首要任务就是先排坑
根目录下新建一个配置文件vue.config.js(它是一个可选的文件，一般Vue UI创建的都自带，npm就默认没有，npm run serve会自动的加载该文件的配置)

1. 怎么做环境变量的配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
    .set('__CSS__', resolve('src/assets/css'))
    .set('__FONT__', resolve('src/assets/font'))
    .set('__IMAGE__', resolve('src/assets/image'))
  }
}

2. build之后空白页

module.exports = {
  ......,
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

3. 跨域代理

module.exports = {
  //默认的挂载服务器
  devServer: {
    // overlay: { // 让浏览器 overlay 同时显示警告和错误
    //   warnings: true,
    //   errors: true
    // },
    // open: false, // 是否打开浏览器
    // host: "localhost",
    port: "3000", // 代理断就
    // https: false,
    // hotOnly: false, // 热更新
    proxy: {
      "/API": {
        target: "your url", // 目标代理接口地址
        secure: false,
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        // ws: true, // 是否启用websockets
        pathRewrite: {
          "^/API": "/API"
        }
      }
    }
  }
};

别名路径 VS @ VS ~

vue-cli4文件目录有所改变，public不仅存在着页面，还可以存储一些静态资源，但是webpack不会对该目录的非默认文件进行打包处理。

1. 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

2. 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

3. 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析

4. 如果 URL 以 @ 开头，它也会作为一个模块请求被解析

注意，在版本3，对于第三条，如果配置了路径别名不需要~开头，但是4规范了这一点。

看一些应用场景：

1. 样式的引入

//1.
<style src="__CSS__/global.css" />
//2.
<style>
  @import url('~__CSS__/global.css');
  @import url('~@/assets/css/global.css');
  /* 
    @import url('@/assets/css/global.css'); 无效
    得出结论 在style內部标签要引入样式必须用~开头
  */
</style>

2. 图片引入

<img alt="Vue logo" src="~__IMAGE__/logo.png">
<img alt="Vue logo" src="@/assets/image/logo.png">
<img alt="Vue logo" src="~@/assets/image/logo.png">
/*
  __IMAGE__/logo.png 无效
*/

3. js或者vue引入

const About = () => import('__VIEWS__/Home')
const About = () => import('@/assets/views/Home')

附录

环境配置已经完成，现在可以开始学习Vue了

Vue.js呼叫请回答