VUE开发--打包部署(六十四)

一、项目示例

1. 前端代码
   通用请求文件：request.js

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:8888', // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  console.log("请求拦截");
  return config
}, error => {
  return Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(
  response => {
    console.log("响应拦截");
    return response;
  }, error => {
    return Promise.reject(error.response.data)
  })

export default service

接口文件：src\api\user.js

import request from '@/request'

/**
 * api接口调用
 */
export function getList() {
  return request({
    url: '/user',
    method: 'get'
  });
}

组件文件：src\views\Home.vue

2. 后端代码

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    @GetMapping
    public List getList(){
        List list=new ArrayList<>();
        User user1=new User();
        user1.setId(1);
        user1.setUsername("张三");
        user1.setAddress("山西省太原市");
        User user2=new User();
        user2.setId(2);
        user2.setUsername("李四");
        user2.setAddress("山西省长治市");
        list.add(user1);
        list.add(user2);
        return list;
    }
}

3. 请求测试

   
   
   请求测试

二、打包部署

1. Vue前端构建

D:\vue-test>npm run build

生成文件

生成文件

生成文件

构建成功后基本会在配置的dist文件下生成静态html文件。
使用rar压缩为zip包：

压缩为zip包

2. 静态代码上传到服务器

# 创建目录
[root@localhost ~]# mkdir /www
[root@localhost ~]# cd /www
# 上传文件
[root@localhost www]# rz
[root@localhost www]# ls
dist.zip

3. 解压 dist.zip

[root@localhost www]# yum install unzip
[root@localhost www]# unzip dist.zip 
Archive:  dist.zip
   creating: dist/
  inflating: dist/favicon.ico        
  inflating: dist/index.html         
   creating: dist/js/
  inflating: dist/js/app.c8df09f4.js  
  inflating: dist/js/app.c8df09f4.js.map  
  inflating: dist/js/chunk-vendors.a67bbf0a.js  
  inflating: dist/js/chunk-vendors.a67bbf0a.js.map  

4. Nginx 配置
   进入Nginx安装目录，修改 Nginx 的配置文件:

[root@localhost www]# cd /usr/local/nginx
[root@localhost nginx]# vi conf/nginx.conf
# root 映射到静态代码文件夹 44行
              location / {
                 # root   html;
                 # 指向解压后的路径
                  root /www/dist;
                  index  index.html index.htm;
              }

5. 重启Nginx

[root@localhost nginx]# ./sbin/nginx -s reload

6. 访问测试

   
   
   访问测试

三、常见问题：

1. vue引入外部.css文件，单独打包
   解决：
   直接在index.html页面上就可以了。

2. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
   nginx正确的配置：

 location / {
            try_files $uri $uri/ /index.html;
        }