• vue前端项目中添加独立的静态资源


    如果想要在vue项目中放一些独立的静态资源,比如html文件或者用于下载的业务模板或其他文件等,需要在vue打包的时候指定一下静态资源的位置和打包后的目标位置。
    使用的是 copy-webpack-plugin 插件,如果没有安装则需要先安装一下,到项目的根目录下执行:
    npm install --save-dev copy-webpack-plugin

    然后修改 vuew.config.js:
    const CopyPlugin = require("copy-webpack-plugin")
    module.exports = {
        configureWebpack:{
              plugins: [
                new CopyPlugin([
                  {
                    from: "static_files",
                    to: "static_files"

                  },
                ]),
              ]
            },
    }

    例如:我的vuew.config.js修改后内容为如下:

    const CopyPlugin = require("copy-webpack-plugin")

    module.exports = {
        // 部署生产环境和开发环境下的URL。
        // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
        // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
        // publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
        // // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
        // outputDir: 'dist',
        // // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
        // assetsDir: 'static',
        // // 是否开启eslint保存检测,有效值:ture | false | 'error'
        // lintOnSave: process.env.NODE_ENV === 'development',
        // // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
        // productionSourceMap: false,
        // webpack-dev-server 相关配置
        devServer: {
          port: 8080,
          open: true,
          // 是否在这个端口下开启热更新
          hot:true,
          //后端服务使用代理
          proxy: {
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            [process.env.VUE_APP_BASE_API]: {
              target: `http://localhost:5000`,
              changeOrigin: true,
              pathRewrite: {
                ['^' + process.env.VUE_APP_BASE_API]: ''
              }
            }
          },
          disableHostCheck: true
        },
        configureWebpack:{
          plugins: [
            new CopyPlugin([
              {
                from: "static_files",
                to: "static_files"
              },
            ]),
          ]
        },

      }
      
      前端代码根目录下创建静态资源目录(我创建的是:static_files)和src目录并列,把我需要的静态目录和文件拷贝到这个 static_files 目录下,打包的时候就会打包进去了。


      

      前端代码根目录下创建静态资源目录(我创建的是:static_files)和src目录并列,把我需要的静态目录和文件拷贝到这个 static_files 目录下,打包的时候就会打包进去了。
      前端代码访问静态文件时,就可以直接 href 或 src 引用了:  
      下载模板

  • 相关阅读:
    双11网络机顶盒哪个好?数码博主横评20款盘点网络机顶盒排名
    探索CPU的黑盒子:解密指令执行的秘密
    霸榜!这本《程序员如何向架构师转型》在Github已持续置顶两月
    198.打家劫舍
    【第006篇】通过impdp命令导入dmp文件到Oracle11g数据库中
    阿里云交互式建模(DSW)的探索和踩坑
    static关键字总结-C/C++
    多层感知器神经网络模型,人工智能神经网络模型
    正则表达式
    手把手带你玩摄像头模组
  • 原文地址:https://blog.csdn.net/sunny05296/article/details/133427419