开发相关
代理服务使用
vue.config.js
devServer: {
// /* port: 端口号, */
proxy: {
'/Development': {
target: 'http://xxx.xx.xx.xx/WebApi/api/',
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/Development': '' // rewrite path
}
},
}
}
webapi.js
// 创建 axios 实例
const service = axios.create({
baseURL: '/Development/', // api base_url
timeout: 6000, // 请求超时时间
})
//登录
export function login (parameter) {
return service({
method: 'post',
url: '/Power',
data: {
username: parameter.User_Account,
password: parameter.User_Pwd,
operate_Type: 'Login',
}
})
}
部署相关
打包
vue-cli-service build
打包后文件目录
默认端口直接部署 404
iis下，默认端口直接添加应用程序指向打包路径
部署目录
资源无法找到
新建网站，刷新后，404
iis下，新建网站指向打包路径，初始加载正常，F5刷新后，404
初始加载
刷新404
参考添加 Vue Router，添加 web.config
image.png
Vue Router后端配置例子
添加后，初次加载、刷新路径资源均正常加载，请求服务 405
405
修改 IIS URL重写，实现代理
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="WebApi" stopProcessing="true">
<match url="^/?Development/(.*)$" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{PATH_INFO}" pattern="^/?Development/" />
</conditions>
<action type="Rewrite" url="http://xxx.xx.xx.xx/WebApi/api/{R:1}" appendQueryString="true" redirectType="Temporary" />
</rule>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
