vue-cli3项目放在服务器上 静态资源路径不对报404错误解决方法

问题描述

我使用vue-cli 3.0创建了项目，npm run build之后上传文件夹 至服务器；报错 css文件、js文件404

image.png

解决方法

1.在项目根目录创建一个vue.config.js文件

image.png

2.在文件里面写入以下代码

module.exports = {
    // 项目部署的基础路径
    // 我们默认假设你的应用将会部署在域名的根部,
    // 例如 https://www.my-app.com/
    // 如果你的应用部署在一个子路径下，那么你需要在这里
    // 指定子路径。比如将你的应用部署在
    // https://www.foobar.com/my-app/
    // 那么将下面这个值改为 '/my-app/'
    baseUrl: "", // 构建好的文件输出到哪里
}

结束。

vue.config.js文件的其他配置

module.exports = {
    /** 区分打包环境与开发环境
     * process.env.NODE_ENV==='production'  (打包环境)
     * process.env.NODE_ENV==='development' (开发环境)
     * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
     */
    // 项目部署的基础路径
    // 我们默认假设你的应用将会部署在域名的根部,
    // 例如 https://www.my-app.com/
    // 如果你的应用部署在一个子路径下，那么你需要在这里
    // 指定子路径。比如将你的应用部署在
    // https://www.foobar.com/my-app/
    // 那么将下面这个值改为 '/my-app/'
    baseUrl: "", // 构建好的文件输出到哪里

    outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败
    lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
    transpileDependencies: [
        /* string or regex */
    ], // 是否为生产环境构建生成sourceMap?

    productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {}, // CSS 相关选项
    css: {
        // 将组件内部的css提取到一个单独的css文件（只用在生产环境）
        // 也可以是传递给 extract-text-webpack-plugin 的选项对象
        extract: true, // 允许生成 CSS source maps?
        sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
        loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue 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: {}, // configure webpack-dev-server behavior
    devServer: {
        open: true, //配置自动启动浏览器  
        disableHostCheck: false,
        host: "0.0.0.0",
        port: 8088,
        https: false,
        hotOnly: true, // 热更新
        // before: app => {}
        // proxy: 'http://localhost:8000'           // 配置跨域处理,只有一个代理
        // proxy: { //配置自动启动浏览器
        //     "/photo": {
        //         target: "https://www.qiuhcd.xyz",
        //         changeOrigin: true, // 是否开启代理
        //         // ws: true,//websocket支持
        //         // secure: false,
        //         pathRewrite: {
        //             "^/api": ""
        //         }

        //     },
        // "/x/*": {
        //     target: "http://XXX.XXX.X.XX:2018",
        //     changeOrigin: true,
        //     // ws: true,//websocket支持
        //     secure: false
        // },
        // }
    }, // 第三方插件配置

    pluginOptions: {
        // ...
    }
};