一、history模式
1、vue.config.js 配置
module.exports = defineConfig({
publicPath:process.env.NODE_ENV === 'production' ? '/vue/' : '/', //此处配置路由,路由名为vue,必须加 / ,可以随意更改
outputDir: 'project', //此处为vue打包后的文件名称
devServer: {.......此处省略......},
transpileDependencies: true,
lintOnSave: false,
});
2、router 文件下 index.js
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [......此处省略......],
});
3、nginx.conf配置
/**
* 此处的/vue 路由对应的是publicPath设置的地址,而不是nginx下存放的project项目包,因为history模式不需要实际存在设置的路由路径,也就是此处的vue
*/
location /vue {
alias D:/nginx-test/nginx-1.24.0/project/; #此处指向的nginx的项目包
try_files $uri $uri/ /vue/index.html;
index index.html;
}
网址访问:http://ip:prot/vue 即可看到自己的首页
二、hash模式
1、vue.config.js 配置
module.exports = defineConfig({
publicPath:process.env.NODE_ENV === 'production' ? './' : '/', //此处配置路由,路由名为./ ,相对路径
outputDir: 'project', //此处为vue打包后的文件名称
devServer: {.......此处省略......},
transpileDependencies: true,
lintOnSave: false,
});
2、router 文件下 index.js
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [......此处省略......],
});
3、nginx.conf配置
/**
* 此处的/project 路由对应的是nginx下存放的project项目包
*/
location /project {
root D:/nginx-test/nginx-1.24.0; #此处实际映射为 D:/nginx-test/nginx-1.24.0/project root地址拼接location映射
index index.html;
}
网址访问:http://ip:prot/project 即可看到自己的首页