VUE3应用，引用外部文件的问题

cqwcns

情况：在写一个本地运行的VUE3应用，build打包后直接运行那种。

采用VUE CLI环境，而不是CDN直接引入，原因是VUE CLI可以写单文件VUE，开发方便，而且有路由功能。


既然是一个小应用，那肯定离不开配置文件。


于是我在根目录创建一个data文件夹，和一个config.js文件，目的是后期可以通过直接修改这个文件来配置这个应用。
再在main.js中引入，读取配置数据都没有什么问题。


问题：
但问题在于build打包后，config.js会被直接打包dist\js中的某个js文件中。
这样是我不希望的，我希望的是config.js不被打包，而是引用根目录的data\config.js，这样我就可以方便在后期修改config.js。
我尝试import改为绝对路径，但没有用。


请教一下各位大佬，这怎样可以实现？谢谢

是小刘呀

把data目录放到public目录下

chenpan622

data/js 放在public文件夹下 在src目录中使用 / 绝对路径引用

cqwcns

是小刘呀 发表于 2022-7-27 11:00
把data目录放到public目录下

谢谢回复。

经测试，这个还有些问题。

放入data目录放到public目录下后，build打包确实会将data文件夹放到dist根目录。

但应用的引用仍是直接将config.js打包到dist\js中的某个js文件中。所以，后期就是修改config.js也是没有用的。

还有什么解决思路？感谢

cqwcns

chenpan622 发表于 2022-7-27 11:17
data/js 放在public文件夹下 在src目录中使用 / 绝对路径引用

谢谢回复。

我不懂这个绝对路径应该怎么写，这样写会报错。

import { configData } from 'd:/code/web/vue/youshu/public/data/config.js'

感谢指教

瞎子

vue.config.js 里面设置一下忽略某个文件打包

orochi14

index.html 里面添加    <script src="<%= BASE_URL %>config.js"></script>

emptynullnill

vue里面定义个相对路径变量可以不？

hejian0301

大概明白楼主的意思了，是想config.js不被打包，在dist目录也可以修改。
借助'copy-webpack-plugin'插件可实现。
第一步：在index.html加入<script type="text/javascript" src="<%= BASE_URL %>config.js"></script>
第二步：安装'copy-webpack-plugin'插件,yarn add -D copy-webpack-plugin
第三步：配置vue.config.js，如下：

[JavaScript] 纯文本查看 复制代码

const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = defineConfig({
  publicPath: '',
  transpileDependencies: true,
  configureWebpack: {
    plugins:[
      new CopyWebpackPlugin({
        patterns: [{
          from: './src/data/config.js',
          to: 'config.js'
        }]
      })
    ]
  }
})

hitomi666

首行加入/* eslint-disable */
然后用一下通配路径

[JavaScript] 纯文本查看 复制代码

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }