我们使用
cnpm run dev
运行项目,只是在本地开发环境中进行测试,一旦将项目部署到服务器上就会出现各种问题,如axios
请求跨域、css
样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案
需求:将项目成功打包部署到linux
下,能成功访问到页面。
步骤一:把绝对路径改为相对路径,打开config/index.js
会看到一个build
属性,这里就我们打包的基本配置了。你在这里可以修改打包的目录,打包的文件名。最重要的是一定要把绝对目录改为相对目录。修改config index.js
文件中的打包配置
步骤二、修改build
.下的utils.js
(解决css
背景图片失效问题)
增加 publicPath:'../../',
由于项目打包之后,所有的js
,css
,图片都会在各自统一的文件夹内,所以,之前的路径需要改掉,单个修改花费时间太长,那么应该怎么做呢。
打开build
文件夹里面的utils.js
,根据需求添加,通常会添加两个../
。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath : '../../' //新添加的内容,路径配置
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
步骤三:打开项目中config
文件夹里面的prod.env.js
文件,将后端给的线上路径填入。
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://sdk.*********.cn:3838/"' //线上路径
}
步骤四、进入vue
项目根目录下使用命令 cnpm run build
打包项目,成功后会出现dist
文件夹,里面含有static
文件夹、index.html
步骤五、将生成的dist下文件复制到服务器下的对应文件夹下,然后进行访问
1.如果在
config -> index.js
中的build
代码中的productionSourceMap
的值设为false
,打包后文件体积可以减少百分之八十2.如果设置
build
文件夹下的webpack.prod.conf.js
中HtmlWebpackPlugin
插件配置参数添加hash: true
,即会使打包生成的index.html
中的js
和css
路径带有?+随机字符串,
也就是版本控制
二、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’即可
}
}
参考: