最近项目使用的 "vue": "^2.6.11",
vue.config.js
module.exports = {
publicPath: "./",
outputDir: "dist", // 构建时的输出目录
assetsDir: "static", // 放置静态资源的目录
lintOnSave: false,
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/assets/css/gloable.scss";`
}
}
},
productionSourceMap: process.env.NODE_ENV === 'production' ? true : false,
devServer: {
hot: true, //热更新替换,更新页面
port: '8081', // 端口号
host: '0.0.0.0',//指定要使用的主机IP。默认情况下这是localhost。
open: true, //自动启动浏览器
compress: true, //为所服务的一切启用gzip压缩
proxy: {
'/api': {
target: 'http://news.baidu.com', // 目标接口的域名
// secure: true, // https 的时候 使用该参数
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api' : '' // 重写路径
}
}
}
}
}
打包之后部署到nginx后浏览器刷新,出现404页面
针对次修改nginx配置如下:
server {
listen 8889;
server_name 192.168.70.133;
#if ($host != 'www.imofa.net' ) {
# rewrite ^/(.*)$ http://www.imofa.net/$1 permanent;
#}
access_log logs/access.log;
error_log logs/error.log;
root E:\dist;
location / {
try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
}
重启nginx!!!