这里简单记录一下vue项目打包部署服务器的过程以及出现的问题,以便后续学习。。。

我们使用cnpm run dev 运行项目,只是在本地开发环境中进行测试,一旦将项目部署到服务器上就会出现各种问题,如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案,

需求:将项目成功打包部署到linux下,能成功访问到页面。

步骤一:修改config index.js文件中的打包配置

步骤二、修改build.下的utils.js  (解决css背景图片失效问题)

增加  publicPath:'../../',

步骤三、进入vue项目根目录下使用命令 cnpm run build  打包项目,成功后会出现dist文件夹,里面含有static文件夹、index.htm

步骤四、将生成的dist下文件复制到服务器下的njed-app文件夹下

步骤五、测试,访问:http://118.162.105.152:7101/njed-app/index.html

ps:axios跨域问题,

方式1:服务器端设置跨域 
header(“Access-Control-Allow-Origin:*”); 
header(“Access-Control-Allow-Headers:content-type”); 
header(“Access-Control-Request-Method:GET,POST”); 
方式2:在config下index.js中设置一个代理服务器,使用proxyTable 我比较推荐这种方法。 
首先在config/index.js 里面找到proxyTable :{} ,然后在里面加入

     '/api': {
        target: 'http://71.158.4.120:8080/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
                //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调
                //用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
        }
     }

方式3:使用jsonp方式。  

Logo

前往低代码交流专区

更多推荐