Vue项目打包、注意事项、服务器nginx部署 & 解决跨域

一、打包前注意事项：

1. config/index.js中修改： assetsPublicPath: './' ，默认是assetsPublicPath: '/' 。否则会找不到静态资源

   build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths  打包后文件要存放的路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static', //除了 index.html 之外的静态资源要存放的路径
    assetsPublicPath: './',    	//打包后，index.html里面引用资源的的相对地址。默认是'/'

2. build/utils.js中修改：加入publicPath: '../../',

否则可能会报错：Failed to decode downloaded font:http://xxx.xxx.xxx.xxx:8081/static/css/static/fonts/element-icons.535877f.woff

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',   //解决问题：“Failed to decode downloaded font: http://xxx.xxx.xxx.xxx:8081/static/css/static/fonts/element-icons.535877f.woff”
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

3. config/index.js中配置的 解决跨域问题 的 “proxyTable”代理服务 在打包后会失效。

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {   //代理服务器。解决跨域（打包部署后失效）

      '/api': {   //自定义的axios请求路径
        target: 'http://xxx.xxx.xxx.xxx:8082',  //后台请求的真实后端服务接口host
        secrue:false, //如果是https接口，需要排至这个参数；
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '' //根据标识:"/api"，重写路径。将 上面的target，和这里的 ''，拼接起来，组成 http://xxx.xxx.xxx.xxx:8082 ，然后由 http://xxx.xxx.xxx.xxx:8081（vue服务host）/api/ 代理 发出请求。
        }
      },

4. main.js配置：开发环境、生产环境接口地址配置

import axios from 'axios'

//开发环境、生产环境接口地址配置
axios.defaults.baseURL = (process.env.NODE_ENV==='development') ? 'api': 'api';

上面代码的作用是在请求后端接口时，例如：

//请求后端接口，获取名称
axios.get('/getName').then(resp => {
	return resp.data;
})

将 “api” 拼接到 “/getName”的前边，组成“api/getName”。

这里再说一下：上一点说的 config/index.js 中 proxyTable 的 ‘/api’ 的作用，其实就是将 以 “api” 开头的地址都转到 http://xxx.xxx.xxx.xxx:8082 上。

下边说到的 nginx nginx.conf 配置文件中 配置的代理 “location /api/”（见下边内容） 的作用也是一样的。

二、打包（使用idea）

可以直接使用idea的 biuld 运行：

完成后出现 dist 目录；
将 dist 文件夹压缩成 .zip 文件，上传到服务器，再解压：unzip dist.zip 就可以了；

三、 nginx部署Vue项目 & 解决跨域

nginx–安装：https://www.cnblogs.com/zouzou-busy/p/11622420.html
安装后通过nginx -v 可测试是否安装成功。

cd  /usr/local/nginx/sbin/	
./nginx  				# 启动（在sbin目录下执行）
./nginx -s reload       # 重新载入配置文件
./nginx -s reopen       # 重启 Nginx
./nginx -s stop         # 停止 Nginx
./nginx -t 				#测试，通过了再重启别一天天的自信重启还找不到问题

启动后，用浏览器访问：服务器ip：nginx端口，我的是xxx.xxx.xxx.xxx:8081，显示如下既启动成功

代理配置，解决跨域：

修改nginx的配置文件：

vim /usr/local/nginx/conf/nginx.conf 

server {
    listen       8081;	#nginx端口

    server_name  xxx.xxx.xxx.xxx;		#服务器 ip 地址

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   /usr/local/vue/dist;	#dist.zip解压后，dist文件的位置
        try_files $uri $uri/ /index.html;	#重定向,内部文件的指向(照写)
    }
	
	#代理配置，解决跨域。以“/api”开头的地址都转到 http://xxx.xxx.xxx.xxx:8082/ 上
    location /api/ {	#当请求跨域时配置代理转发（上面说到，打包后 配置的代理服务“proxyTable”会失效。这里的配置就是解决该问题）
        proxy_pass http://xxx.xxx.xxx.xxx:8082/;	#实际后端服务接口请求地址
    }

！！！一定要注意：“location /api/ ” 和 “proxy_pass http://xxx.xxx.xxx.xxx:8082/” 中，最后边的 “/”，要根据你vue中具体怎么写的加或不加。我就出现了这个问题。