版权声明：Copyright 2000-2018 Max.Bai All rights Reserved. https://blog.csdn.net/max229max/article/details/84854030

Vue - Nginx 配置

Max.Bai

2018-12

1. 打包

npm run build

2. dist 上传到服务器

生成 dist目录，上传dist到服务器

3. nginx配置

3.1 如果访问路劲是服务器的根路径

根路径配置很简单

        index index.html;
        access_log  /tmp/nginxlog/gatp/nginx_access.log;
        error_log       /tmp/nginxlog/gatp/nginx_error.log;
        
        location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
        {
            root   /path/of/your/dist;
            expires      7d;
        }

3.2 访问路非根路径
可能nginx部署了多个系统，需要给vue项目一个前缀开始
比如：1.2.3.4/xxms
访问路径要以xxms开始才可以的

需要vue项目做配合
a. index.html文件修改
    header 添加 <meta base="/xxms/">

b. config/index.js文件修改
    修改   build下assetsPublicPath

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/xxms/',   // 这里




// 2020 年
新版修改 vue.config.js

publicPath: '/xxms/',

c.src/router/index.js文件修改
    添加 base: '/xxms/'

var router = new Router({
    mode: 'history',
    base: '/xxms/',		//这里
    routes: [
      {

然后npm run build
打包好后上传到服务器，修改nginx配置

        location ^~/xxms {
            alias /path/of/your/dist/;
            index index.html;
            try_files $uri $uri/ /xxms/index.html;
        }
        location @router  {
            rewrite ^.*$ /xxms/index.html last;
        }

        # 2020年更新
	server {
		listen 80;
		server_name _;
		root  /opt/ops_cmdb/dist;
	        index index.html;

		location / {
		    index  index.html;
	            try_files $uri $uri/ @router /index.html$is_args$args;
	        }

	        location @router  {
	            rewrite ^.*$ /index.html last;
	        }


         }   

3.3 vue 跨域请求nginx配置
假设你的vue axios 前缀是/xxmx/api, 就是后端接口地址的访问前缀
nginx添加配置，做请求转发，假设后端地址是2.2.3.3:8888

        location ^~/xxmx/api/ {
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass http://2.2.3.3:8888/;
        }

4. 配置完重新加载nginx配置

nginx -t
nginx -s reload

 

参考：

http://blog.51cto.com/191226139/2102483