步骤概览
1、配置 Nginx 静态文件夹
2、在 Vue.js 中配置图片路径
3、打包和部署前端文件
1. 配置 Nginx 静态文件夹
首先,确保Nginx配置文件 (nginx.conf
) 设置正确,以便在 D:\nginx-1.21.6\html\dist\pdf\web\产品图片
目录中提供静态文件。
编辑你的 nginx.conf
文件,添加静态文件服务配置:
server {
listen 80;
server_name your_server_name;
location / {
root D:/nginx-1.21.6/html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /pdf/web/产品图片/ {
alias D:/nginx-1.21.6/html/dist/pdf/web/产品图片/;
}
# 其他配置项...
}
这样,Nginx会将请求 /pdf/web/产品图片/
映射到 D:/nginx-1.21.6/html/dist/pdf/web/产品图片/
目录。
2. 在 Vue.js 中配置图片路径
在你的Vue.js代码中,使用静态路径来访问图片。在组件中,可以直接使用服务器上的相对路径。
假设你有一个 row.img
字段,它包含图片文件名,你可以这样构建图片路径:
<template>
<div>
<el-button @click="handlePreviewA(row)">预览图片</el-button>
<el-dialog :visible.sync="dialogVisible" width="30%">
<img :src="dialogImageUrl" alt="预览图片" style="width: 100%;" />
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
}
},
methods: {
handlePreviewA(row) {
if (row.img == null) {
this.$message.error("暂无图片");
} else {
// 使用绝对路径访问Nginx服务器上的图片
this.dialogImageUrl = `/pdf/web/产品图片/${row.img}`;//注意:这里的row.img要匹配服务器的图片命名
this.dialogVisible = true;
}
}
}
}
</script>
<style>
/* 添加你自己的样式 */
</style>
3. 打包和部署前端文件
运行以下命令来打包你的Vue.js项目:
npm run build
将打包生成的 dist
文件夹复制到 D:\nginx-1.21.6\html
目录下。
总结
通过在Nginx配置文件中设置静态文件路径,并在Vue.js组件中使用相对路径访问图片,你可以确保前端代码在打包后能够正确访问服务器上的图片文件夹。这样,即使图片文件夹不在本地开发环境中,打包后的前端代码也能正常工作。