因為之前一致出現(xiàn)的跨域問題，從而想到了這個辦法，屬于偏方。推薦使用nginx部署，再去解決跨域問題。
接下來聊一聊本文所使用的方法。
首先將你的前端vue項目拷貝一份到服務(wù)器，準(zhǔn)備一個dockerfile文件，用這個進(jìn)行部署首先你得前提是配置好了vue.config.js的跨域配置了，例如：
module.exports = {
devServer: {
proxy: {
port: 8081,// vue運行端口號
host: '0.0.0.0',
'/api': {
target: 'http://your-spring-boot-server:8080', // 后端Spring Boot項目地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
//axios的baseurl也得設(shè)置成
const http = axios.create({
baseURL: '/api', // 以訪問以api開頭
timeout: 10000,
}
)
一 、拷貝項目文件和制作Dockerfile
Ddckfile信息
# 使用Node.js官方鏡像作為基礎(chǔ)鏡像
FROM node:14.17.5
# 設(shè)置工作目錄
WORKDIR /app
# 復(fù)制項目文件到容器中
COPY ./app /app
#配置docker容器里面的npm鏡像源，不然可能會出現(xiàn)下載超時，出現(xiàn)錯誤
RUN npm config set registry https://registry.npm.taobao.org/
# 安裝項目依賴
RUN npm install
# 打包前端應(yīng)用
RUN npm run build
# 設(shè)置容器啟動命令
CMD ["npm", "run", "serve"]
在Dockfile同級目錄運行,注意最后的點號
npm build -t vuecli:v1.0 .
最后啟動創(chuàng)建容器并啟動
docker run -d --name vuepro -p 8080:8080 vuecli:v1.0
輸入下面地址即可訪問首頁文章來源：http://www.zghlxwxcb.cn/news/detail-624440.html
http://ip地址:8080文章來源地址http://www.zghlxwxcb.cn/news/detail-624440.html
到了這里，關(guān)于以vue2為例，用npm開發(fā)環(huán)境在后端部署vue2項目（更推薦使用nginx部署）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
