• 出入库管理系统vue2前端开发服务器地址配置


    【精选】vue.config.js 的完整配置(超详细)_vue.config.js配置_web学生网页设计的博客-CSDN博客

    本项目需要修改两处:

    1、vue开发服务器地址:config\index.js

    1. 'use strict'
    2. // Template version: 1.3.1
    3. // see http://vuejs-templates.github.io/webpack for documentation.
    4. const path = require('path')
    5. module.exports = {
    6. dev: {
    7. // Paths
    8. assetsSubDirectory: 'static',
    9. assetsPublicPath: '/',
    10. proxyTable: {},
    11. // Various Dev Server settings
    12. host: '10.0.180.203', //'localhost', // can be overwritten by process.env.HOST
    13. port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    14. autoOpenBrowser: false,
    15. errorOverlay: true,
    16. notifyOnErrors: true,
    17. poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    18. // Use Eslint Loader?
    19. // If true, your code will be linted during bundling and
    20. // linting errors and warnings will be shown in the console.
    21. useEslint: true,
    22. // If true, eslint errors and warnings will also be shown in the error overlay
    23. // in the browser.
    24. showEslintErrorsInOverlay: false,
    25. /**
    26. * Source Maps
    27. */
    28. // https://webpack.js.org/configuration/devtool/#development
    29. devtool: 'cheap-module-eval-source-map',
    30. // If you have problems debugging vue-files in devtools,
    31. // set this to false - it *may* help
    32. // https://vue-loader.vuejs.org/en/options.html#cachebusting
    33. cacheBusting: true,
    34. cssSourceMap: true
    35. },
    36. build: {
    37. // Template for index.html
    38. index: path.resolve(__dirname, '../dist/index.html'),
    39. // Paths
    40. assetsRoot: path.resolve(__dirname, '../dist'),
    41. assetsSubDirectory: 'static',
    42. assetsPublicPath: './',
    43. /**
    44. * Source Maps
    45. */
    46. productionSourceMap: true,
    47. // https://webpack.js.org/configuration/devtool/#production
    48. devtool: '#source-map',
    49. // Gzip off by default as many popular static hosts such as
    50. // Surge or Netlify already gzip all static assets for you.
    51. // Before setting to `true`, make sure to:
    52. // npm install --save-dev compression-webpack-plugin
    53. productionGzip: true,
    54. productionGzipExtensions: ['js', 'css'],
    55. // Run the build command with an extra argument to
    56. // View the bundle analyzer report after build finishes:
    57. // `npm run build --report`
    58. // Set to `true` or `false` to always turn it on or off
    59. bundleAnalyzerReport: true
    60. }
    61. }

    2、后台接口地址:src\utils\request.js

    1. import axios from 'axios'
    2. import {message, Modal, notification} from 'ant-design-vue'
    3. import moment from 'moment'
    4. import store from '../store'
    5. import db from 'utils/localstorage'
    6. moment.locale('zh-cn')
    7. // 统一配置
    8. let FEBS_REQUEST = axios.create({
    9. baseURL: 'http://10.0.180.203:9527/', // 'http://127.0.0.1:9527/',
    10. responseType: 'json',
    11. validateStatus (status) {
    12. // 200 外的状态码都认定为失败
    13. return status === 200
    14. }
    15. })
    16. // 拦截请求
    17. FEBS_REQUEST.interceptors.request.use((config) => {
    18. let expireTime = store.state.account.expireTime
    19. let now = moment().format('YYYYMMDDHHmmss')
    20. // 让token早10秒种过期,提升“请重新登录”弹窗体验
    21. if (now - expireTime >= -10) {
    22. Modal.error({
    23. title: '登录已过期',
    24. content: '很抱歉,登录已过期,请重新登录',
    25. okText: '重新登录',
    26. mask: false,
    27. onOk: () => {
    28. return new Promise((resolve, reject) => {
    29. db.clear()
    30. location.reload()
    31. })
    32. }
    33. })
    34. }
    35. // 有 token就带上
    36. if (store.state.account.token) {
    37. config.headers.Authentication = store.state.account.token
    38. }
    39. return config
    40. }, (error) => {
    41. return Promise.reject(error)
    42. })
    43. // 拦截响应
    44. FEBS_REQUEST.interceptors.response.use((config) => {
    45. return config
    46. }, (error) => {
    47. if (error.response) {
    48. let errorMessage = error.response.data === null ? '系统内部异常,请联系网站管理员' : error.response.data.message
    49. switch (error.response.status) {
    50. case 404:
    51. notification.error({
    52. message: '系统提示',
    53. description: '很抱歉,资源未找到',
    54. duration: 4
    55. })
    56. break
    57. case 403:
    58. case 401:
    59. notification.warn({
    60. message: '系统提示',
    61. description: '很抱歉,您无法访问该资源,可能是因为没有相应权限或者登录已失效',
    62. duration: 4
    63. })
    64. break
    65. default:
    66. notification.error({
    67. message: '系统提示',
    68. description: errorMessage,
    69. duration: 4
    70. })
    71. break
    72. }
    73. }
    74. return Promise.reject(error)
    75. })
    76. const request = {
    77. post (url, params) {
    78. return FEBS_REQUEST.post(url, params, {
    79. transformRequest: [(params) => {
    80. let result = ''
    81. Object.keys(params).forEach((key) => {
    82. if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
    83. result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
    84. }
    85. })
    86. return result
    87. }],
    88. headers: {
    89. 'Content-Type': 'application/x-www-form-urlencoded'
    90. }
    91. })
    92. },
    93. put (url, params) {
    94. return FEBS_REQUEST.put(url, params, {
    95. transformRequest: [(params) => {
    96. let result = ''
    97. Object.keys(params).forEach((key) => {
    98. if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
    99. result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
    100. }
    101. })
    102. return result
    103. }],
    104. headers: {
    105. 'Content-Type': 'application/x-www-form-urlencoded'
    106. }
    107. })
    108. },
    109. get (url, params) {
    110. let _params
    111. if (Object.is(params, undefined)) {
    112. _params = ''
    113. } else {
    114. _params = '?'
    115. for (let key in params) {
    116. if (params.hasOwnProperty(key) && params[key] !== null) {
    117. _params += `${key}=${params[key]}&`
    118. }
    119. }
    120. }
    121. return FEBS_REQUEST.get(`${url}${_params}`)
    122. },
    123. delete (url, params) {
    124. let _params
    125. if (Object.is(params, undefined)) {
    126. _params = ''
    127. } else {
    128. _params = '?'
    129. for (let key in params) {
    130. if (params.hasOwnProperty(key) && params[key] !== null) {
    131. _params += `${key}=${params[key]}&`
    132. }
    133. }
    134. }
    135. return FEBS_REQUEST.delete(`${url}${_params}`)
    136. },
    137. export (url, params = {}) {
    138. message.loading('导出数据中')
    139. return FEBS_REQUEST.post(url, params, {
    140. transformRequest: [(params) => {
    141. let result = ''
    142. Object.keys(params).forEach((key) => {
    143. if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
    144. result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
    145. }
    146. })
    147. return result
    148. }],
    149. responseType: 'blob'
    150. }).then((r) => {
    151. const content = r.data
    152. const blob = new Blob([content])
    153. const fileName = `${new Date().getTime()}_导出结果.xlsx`
    154. if ('download' in document.createElement('a')) {
    155. const elink = document.createElement('a')
    156. elink.download = fileName
    157. elink.style.display = 'none'
    158. elink.href = URL.createObjectURL(blob)
    159. document.body.appendChild(elink)
    160. elink.click()
    161. URL.revokeObjectURL(elink.href)
    162. document.body.removeChild(elink)
    163. } else {
    164. navigator.msSaveBlob(blob, fileName)
    165. }
    166. }).catch((r) => {
    167. console.error(r)
    168. message.error('导出失败')
    169. })
    170. },
    171. download (url, params, filename) {
    172. message.loading('文件传输中')
    173. return FEBS_REQUEST.post(url, params, {
    174. transformRequest: [(params) => {
    175. let result = ''
    176. Object.keys(params).forEach((key) => {
    177. if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
    178. result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
    179. }
    180. })
    181. return result
    182. }],
    183. responseType: 'blob'
    184. }).then((r) => {
    185. const content = r.data
    186. const blob = new Blob([content])
    187. if ('download' in document.createElement('a')) {
    188. const elink = document.createElement('a')
    189. elink.download = filename
    190. elink.style.display = 'none'
    191. elink.href = URL.createObjectURL(blob)
    192. document.body.appendChild(elink)
    193. elink.click()
    194. URL.revokeObjectURL(elink.href)
    195. document.body.removeChild(elink)
    196. } else {
    197. navigator.msSaveBlob(blob, filename)
    198. }
    199. }).catch((r) => {
    200. console.error(r)
    201. message.error('下载失败')
    202. })
    203. },
    204. upload (url, params) {
    205. return FEBS_REQUEST.post(url, params, {
    206. headers: {
    207. 'Content-Type': 'multipart/form-data'
    208. }
    209. })
    210. }
    211. }
    212. export default request

    解析vue中的process.env_vue process-CSDN博客

  • 相关阅读:
    硅谷15菜单权限
    hive零基础入门
    Nginx 无法正确加载静态文件,静态文件加载404或者为html;Nginx 配置访问指定url路径项目部署;
    在 React 项目中全量使用 Hooks
    HTML做一个节日页面【六一儿童节】纯HTML代码
    JavaScript设计模式(三) 迭代器模式 发布-订阅模式
    矩阵【线性代数系列(二)】
    婚纱行业怎么做好有效的营销方案来打动客户?
    PMP真的有用吗?
    人工智能在生物学和神经科学中的应用
  • 原文地址:https://blog.csdn.net/qq_27361945/article/details/134394518