本人菜鸟一枚,下面的理解如果有误,欢迎指出来,共同学习!
一、vue打包部署的相关文件配置
前端vue2项目config\index.js文件
build: {
// Template for index.html
index: path.resolve(__dirname, '../ROOT/index.html'),
assetsRoot: path.resolve(__dirname, '../ROOT'), // 打包后的文件夹名
assetsSubDirectory: 'static', // 打包后的二级静态资源文件夹名
assetsPublicPath: './' // vue中引入的文件,图片,css路径
}
前端vue3项目配置根目录vue.config.js文件
module.exports = {
publicPath: './', // vue中引入的文件,图片,css路径
outputDir: 'dist', // 打包后的文件夹名
assetsDir: 'static' // 打包后的二级静态资源文件夹名
}
niginx的server配置
server {
listen 8040;
server_name localhost; // 服务器地址
index index.html index.htm; // 默认读取的文件
location /fwdt { // ①
alias D:/wenhui/testexchange/admin/ROOT; // 配置VUE打包后对应的文件夹地址
}
}
配置好以后,访问的路径就是:http://localhost:8040/fwdt
如果想要访问路径是http://localhost:8040,那么就把上面①中的/fwdt改成/
二、niginx设置带路径并且代理的方式访问
也就是说:
访问地址是http://localhost:8030/abc/,
其实访问的是另一台服务的地址http://localhost:8040/abc/
niginx的server配置
server {
listen 8030;
server_name localhost;
index index.html index.htm;
location /abc/ {
proxy_pass http://localhost:8040;
}
}
server {
listen 8040;
server_name localhost;
index index.html index.htm;
location /abc{
alias D:/wenhui/admin/dist;
}
}
在网上又搜到一篇文章感觉写的挺好的,有兴趣的可以去看看点击此处飞过去。。。