1.首先进入项目根目录,打包:

npm run build

2.出现dist文件夹


3.进入服务器,nginx/html路径下,清空html文件夹下的两个文件。

4.上传dist文件夹,复制dist文件夹中的所有内容到html文件夹中。

5.修改nginx的配置文件(conf/nginx.conf)

        location / {
            root html;
            index  index.html index.htm;
        }

出现问题

  1. 路由失效。
    解决:在项目根路径下添加配置文件
    const path = require('path');
    
    module.exports = {
        // 基本路径
        baseUrl: './',
        // 输出文件目录
        outputDir: 'dist',
        // eslint-loader 是否在保存的时候检查
        lintOnSave: true,
    
        chainWebpack: () => {},
        configureWebpack: (config) => {
            if (process.env.NODE_ENV === 'production') {
                // 为生产环境修改配置...
                config.mode = 'production';
            } else {
                // 为开发环境修改配置...
                config.mode = 'development';
            }
    
            Object.assign(config, {
                // 开发生产共同配置
                resolve: {
                    alias: {
                        '@': path.resolve(__dirname, './src'),
                        '@c': path.resolve(__dirname, './src/components')
                    }
                }
            });
        },
        // 生产环境是否生成 sourceMap 文件
        productionSourceMap: true,
        // css相关配置
        css: {
            // 是否使用css分离插件 ExtractTextPlugin
            extract: true,
            // 开启 CSS source maps?
            sourceMap: false,
            // css预设器配置项
            loaderOptions: {},
            // 启用 CSS modules for all css / pre-processor files.
            modules: false
        },
        // use thread-loader for babel & TS in production build
        // enabled by default if the machine has more than 1 cores
        parallel: require('os').cpus().length > 1,
        // PWA 插件相关配置
        // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
        pwa: {},
        // webpack-dev-server 相关配置
        devServer: {
            open: process.platform === 'darwin',
            host: '0.0.0.0',
            port: 8081,
            https: false,
            hotOnly: false,
            // proxy: {
            //  // 设置代理
            //  // proxy all requests starting with /api to jsonplaceholder
            //  'http://localhost:8080/': {
            //      target: 'http://baidu.com:8080', //真实请求的目标地址
            //      changeOrigin: true,
            //      pathRewrite: {
            //          '^http://localhost:8080/': ''
            //      }
            //  }
            // },
            before: (app) => {}
        },
        // 第三方插件配置
        pluginOptions: {
            // ...
        }
    };

     

  2. 页面刷新404。
    添加一条nginx配置   try_files $uri $uri/ /index.html last;

    修改后如下:
            location / {
                root html;
                try_files $uri $uri/ /index.html last;
                index  index.html index.htm;
            }

     

Logo

前往低代码交流专区

更多推荐