针对后端使用8080和前端使用8080端口进行冲突的解决。
完整项目见:SpringBoot_Vue
后端
后端我们可以在application.properties
中将端口改成8082。
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456
server.port=8082
mybatis-plus.config-location=classpath:/mybatis-config.xml
mybatis-plus.mapper-locations=classpath:/cn/edu/shu/xj/ser/mapper/*.xml
前端
1 搭建vue项目
假设已经安装好node.js,vue,npm,webpack。在前端中配置后端的8082端口。
1.新建vue项目
2.vue项目生成命令是vue init webpack my-project
3.一路确认即可
4.安装完成后,基本目录如下:
2.修改跨域
1.在config/index.js
文件中两处修改
原始:
修改后:
module.exports = {
dev: {
env: require('./dev.env'),
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//new 跨域
proxyTable: {
'/': {
target: 'http://localhost:8082',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
},
2.在build/webpack.dev.conf.js
中如下修改
原始:
修改后:
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
// {
// rewrites: [
// { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
// ],
// },
这样就OK了!
3.语法检查
vue中有个语法检查报错,在build/webpack.base.conf.js
的43行,注释掉即可: