前言：公司vue項(xiàng)目使用 npm run build 打包生成dist文件部署后，當(dāng)需要修改服務(wù)器端地址時(shí)候就又需要重新配置url并打包部署，為簡(jiǎn)化部署測(cè)試工作，想實(shí)現(xiàn)通過(guò)修改服務(wù)器地址的配置文件來(lái)實(shí)現(xiàn)修改打包后的項(xiàng)目服務(wù)器地址。

?

項(xiàng)目基于vue-cli2搭建測(cè)試，下面是實(shí)現(xiàn)步驟：

?

1、在static文件夾下創(chuàng)建配置文件 serverconfig.json，服務(wù)器地址信息

{"ApiUrl":"http://localhost:8082/" }

注意static和assets路徑下文件引用區(qū)分：

• static/?目錄下的文件并不會(huì)被 Webpack 處理：它們會(huì)直接被復(fù)制到最終目錄（默認(rèn)是dist/static）下。必須使用絕對(duì)路徑引用這些文件，這是通過(guò)在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來(lái)確定的。任何放在 static/ 中文件需要以絕對(duì)路徑的形式引用：/static/[filename]。
• assets目錄中的文件會(huì)被webpack處理解析為模塊依賴，只支持相對(duì)路徑形式。因?yàn)閣ebpack會(huì)將圖片當(dāng)做模塊來(lái)引用，所以在js中需要使用require將圖片引用進(jìn)來(lái)，不能直接以字符串的形式。
• 可以通過(guò)webpack+vue自定義路徑別名找到文件的位置，如找到static下文件

export default {name: 'HelloWorld',data () {return {baseURL:getUrl(),svg:require('../assets/svg/circle_red.svg'), //assets下靜態(tài)資源會(huì)被webpack處理解析為模塊依賴，使用相對(duì)路徑//因?yàn)閣ebpack會(huì)將圖片當(dāng)做模塊來(lái)引用，所以在js中需要使用require將圖片引用進(jìn)來(lái)，不能直接以字符串的形式。svg2:{"src":'/static/circle_red.svg'},//static/ 目錄下的文件并不會(huì)被Webpack處理,使用絕對(duì)路徑形式，如/static/[filename]。//通過(guò)webpack+vue自定義路徑別名可以找到文件的位置，如找到static下文件svg3:require('@static/circle_red.svg'), }},}

?

?

?

?

?

?

2、修改 config/index.js 文件的build打包配置，防止出現(xiàn)404文件錯(cuò)誤

防止出現(xiàn)上圖錯(cuò)誤，如下圖將assetsPublicPath對(duì)象修改成? ' ./ '

?

?

?

3、在main.js 文件中配置如下：

import axios from 'axios'Vue.prototype.$axios = axios;let startApp=function(){Vue.prototype.$axios.get("static/serverconfig.json").then((response)=>{//用一個(gè)全局字段保存ApiUrl 也可以用sessionStorage存儲(chǔ)console.log(response.data.ApiUrl);Vue.prototype.ApiUrl=response.data.ApiUrl;new Vue({el: '#app',router,components: {App},template: '<App/>'})}).catch((error)=>{console.log(error)}); } startApp();

注意：

• 防止請(qǐng)求與頁(yè)面渲染之間的時(shí)間差異化導(dǎo)致值獲取不到報(bào) undefined錯(cuò)誤，將?new Vue()實(shí)例化放在請(qǐng)求里執(zhí)行，且先定義?Vue.prototype.ApiUrl，再實(shí)例化new Vue()

?

4、在 .vue 或 js 文件中調(diào)用

<script> import Vue from 'vue' function getUrl(){return Vue.prototype.ApiUrl; }export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App',baseURL:getUrl(),}},methods:{},mounted:function() {console.log(this.baseURL);} } </script>

?

?

5、npm run build 打包后將項(xiàng)目包dist部署到tomcat服務(wù)器上，在dist/static/serverconfig.json文件修改url后刷新瀏覽器頁(yè)面即可

?

?

?

總結(jié)

以上是生活随笔為你收集整理的vue-cli打包后怎么修改服务器地址实践有效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。