# lmc-vue-music

**Repository Path**: lmchh/lmc-vue-music

## Basic Information

- **Project Name**: lmc-vue-music
- **Description**: 根据 B站视频黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibil 进行开发的【VUE简单音乐播放器】
该小demo实现了查询，播放，查看评论，播放MV等功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-15
- **Last Updated**: 2021-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE简单音乐播放器

这个案例是根据 B站视频[黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibil ](https://www.bilibili.com/video/BV12J411m7MG?p=37) 进行开发的



## 一，配置nginx

由于该音乐播放器要调用HTTPS服务的网易云API，VUE对跨域请求要求较高，因此我准备用nginx来做HTTPS的反向代理

在配置 nginx.conf前，要先对 https://autumnfish.cn/ 生成证书，文件`test.crt`和`test.key`放在 `/conf`目录下

```conf
server {
        listen 82;
        listen 443 ssl;
        server_name  localhost;

        ssl_certificate      test.crt;  # 这个是证书的crt文件所在目录
        ssl_certificate_key  test.key; # 这个是证书key文件所在目录
 
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
 
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;


        location / {
            proxy_pass https://autumnfish.cn/;
        }
    }
```

配置成功后以后就可以用 http://localhost:82/ 代替 https://autumnfish.cn/



## 二，配置VUE代理

在vue-cli3项目`lmc-vue-music`目录下创建文件`vue.config.js`

```js
module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        // open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080', 
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: {
            '/proxy': {
                target: 'http://localhost:82',
                changeOrigin: true,
                pathRewrite: {
                    '^/proxy': ''
                }
            }
        },
    }
 }
```

将 http://localhost:82/ 使用 /proxy 来代理