vue-cli项目中的.env.development文件及vue.config.js文件在项目上线前可配置

.env.development文件

  • 在env.development文件中可以添加开发环境变量
VUE_APP_API_URL=http://localhost:3000/hello/api
//添加一个环境变量,在运行npm run build 或者npm run serve 会将该变量添加到process.env
  • 使用环境变量
import axios  from "axios"
const http = axios.create({
     
  baseURL: process.env.VUE_APP_API_URL || 'hello/api',
  // baseURL: "http://localhost:3000/hello/api"
  // 开发环境下会使用process.env.VUE_APP_API_URL,生产环境下会使用‘hello/api’
})
export default http

vue.config.js文件

module.exports = {
     
  outputDir: __dirname + '/../server/hello',
  publicPath: process.env.NODE_ENV === 'production'
  ? '/hello/'
  : '/'
}
  • optputDir:表示运行npm run build 后将dist文件改名hello并编译到与当前文件根路径同级的server文件夹中
  • publicPath : 表示如果当前是打包前的开发环境,则index.html中引用的所有文件路径前缀为 ‘/’: /js/about.05909540.js, 如果是打包后的生产环境,则index.html中引用的所有文件路径前缀为’/hello/’:/hello/js/about.05909540.js

你可能感兴趣的:(vue)