[JavaScript知识库]vue 目录详解

1. 目录结构（vue2.x、vue/cli4.x）

?

2. 测试和正式环境发布

①根目录下面创建 .env.development、 .env.test、 .env.production文件，分别配置开发、测试、正式环境的请求接口地址；

.env.development： VUE_APP_BASE_API?= 'https://xxx.dev.com/Api/'

.env.production ： VUE_APP_BASE_API?= 'https://xxx.com/Api/'

.env.test： VUE_APP_BASE_API?= 'https://xxx.test.com/Api/'

//package.json

"scripts": {

????"serve": "vue-cli-service serve",

????"build": "vue-cli-service build",

????"test": "vue-cli-service build --mode test"

?},

②apis/index.js 通过 process.env.VUE_APP_BASE_API?获取接口地址；

import  axios from  'axios'
import  qs from  'qs'

// let baseUrl = process.env.VUE_APP_BASE_API;
let _axios = axios.create({
    baseURL:process.env.VUE_APP_BASE_API
})
console.log("=====API====",process.env.VUE_APP_BASE_API)

function postRequest(url,params){
    return new Promise((resolve, reject) => {
        _axios.post(url, qs.stringify(params))
        .then(res => {
            if(res.data.code > 0){
                resolve(res.data);
            }else{
                Message.error(res.data.msg)
            }
        })
        .catch(err =>{
            // reject(err.data)     
            Message.error('服务器出错了')
            loading.close()
        })
   });
}


export function login(param) {
    return postRequest('admin/getadmin',param)
}

③npm run serve 命令启动一个本地服务器运行的是开发环境；

④npm run build 命令生成打包文件 dist 将dist里面的文件拖进服务器即可；

⑤npm run test命令生成打包文件 dist 将dist里面的文件拖进测试服务器即可；

⑥默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，如果应用被部署在一个子路径上，你需要在vue.config.js里面加上：

publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

⑦cdn: ?在src/styles/main.scss 文件里面配置公共的css变量，例如：

开发环境：$baseUrl:'../';

正式环境改成cdn地址: $baseUrl:'https://upload.cdn.be-xx.com/xxx/';

在组件里面使用：background-image: url("#{$baseUrl}assets/404.png");