vue 创建简单的项目, 并配置打包

╰+哭是因爲堅強的太久メ 2022-12-28 09:05 149阅读 0赞

## 创建项目 ##

使用 Hbuild-X 创建默认项目.

## 导入 vue-router ##

> cnpm install vue-router --save

*  创建以下文件

src/router/index.js
    src/view/index.vue

*  src/router/index.js 文件中 编写以下内容

import Vue from 'vue'
    import Router from 'vue-router'
    import index from '@/view/index';
    
    Vue.use(Router);
    
    export default new Router({ 
    	routes: [{ 
    			path: '*',
    			redirect: '/',
    		},
    		{ 
    			path: '/',
    			name: 'index',
    			component: index
    		}
    	]
    })

*  在 src/main.js 中编辑

import Vue from 'vue'
    import App from './App.vue'
    // 引入路由
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({ 
      render: h => h(App),
      router, // 注入
    }).$mount('#app')

*  删除 src/App.vue 中多余部分, 并编辑

<template>
    	<div id="app">
    		
    		<router-view />
    	</div>
    </template>
    
    <script> export default { name: 'app', components: { } } </script>
    
    <style> </style>

## 导入 axios 等相关文件 ##

> cnpm install --save axios  
> cnpm i qs --save  
> cnpm i mobile-detect // 获取浏览器手机信息. 按需求添加  
> cnpm i vant

*  创建 src/api/http.js 封装 请求方式

import axios from 'axios'
    import {  Toast } from 'vant'
    import qs from 'qs'
    import MobileDetect from 'mobile-detect';
    var https = { 
      setHeaders() { 
        var md = new MobileDetect(window.navigator.userAgent);
        var headers = { 
          'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
          'appVersion': '1.0.0', // 程序版本號
          'mobileModel': md.os(), // 系统 如 ios
          'mobileVersion': md.os() + md.version(md.userAgent()), // 系统版本 如 ios11
          'product': md.mobile(), // 手机型号(名称)
          'ver': md.os() + md.version(md.userAgent()), // 系统版本 如 ios11
        }
        return headers
      },
    
      get(url, params) { 
        return new Promise((resolve, reject) => { 
          axios.get(
            url,
            { 
              headers: this.setHeaders(),
              params: params,
            }
          ).then(res => { 
            resolve(res.data)
          }).catch(err => { 
            reject(err.data)
          })
        });
      },
    
      post(url, params) { 
        return new Promise((resolve, reject) => { 
          axios.post(
            url,
            params,
            { 
              headers: this.setHeaders(),
            })
            .then(res => { 
              resolve(res.data)	
            })
            .catch(err => { 
              reject(err.data)
            })
        });
      },
    
    }
    export default https

*  创建 src/api/api.js

import axios from './http';
    let baseUrl = location.origin; // 服务器地址
    
    export const getxx= params => axios.post(baseUrl + '/xxx/xxx/xxx', params);

*  其他地方引入, 如 src/view/index.vue 中

import { 
    	getxx
    } from '@/api/api';
    	
    ...
    methods: { 
    	getRequest: function() { 
    		getxx({ 
    			xx: 4,
    			xx: 1,
    		}).then(res => { 
    			console.log(res);
    		})
    	},
    }
    ...

## 配置 打包 设置为 history . ##

*  在 src 平目录 创建 vue.config.js

module.exports = { 
    	// 基本路径,相对路径
    	publicPath: "./",
    	// 输出文件目录
    	outputDir: 'dist',
    	assetsDir: "static", //静态资源目录名称
    	productionSourceMap: false,
    }

*  在 router/index.js 中, 增加代码

let router = new Router({ 
      mode: "history", //去掉url中的#
      base: "/xxx",// 定义项目名, 
      ...
     )}