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

cqwcns 发表于 2022-7-27 10:47

情况：在写一个本地运行的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改为绝对路径，但没有用。

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

是小刘呀 发表于 2022-7-27 11:00

chenpan622 发表于 2022-7-27 11:17

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

cqwcns 发表于 2022-7-27 11:25

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

谢谢回复。

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

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

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

还有什么解决思路？感谢

cqwcns 发表于 2022-7-27 11:28

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

谢谢回复。

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

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

感谢指教

瞎子发表于 2022-7-27 11:49

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

orochi14 发表于 2022-7-27 12:21

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

emptynullnill 发表于 2022-7-27 14:54

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

hejian0301 发表于 2022-7-27 15:23

大概明白楼主的意思了，是想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，如下：
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 发表于 2022-7-27 15:29

首行加入/* eslint-disable */
然后用一下通配路径resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}

页: [1]

吾爱破解 - 52pojie.cn's Archiver

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