vueC-cli3 测试环境打包js文件配置

### vue-cli3 在打包测试环境时js代码不在js文件下的问题，先说一下我环境的配置

###### 分别打包三个环境代码 dev test prod

###### 结果在打包测试环境代码时，js被打包至与html同级目录下，虽然这不影响生产环境的打包目录，但是想要打包后的js文件都是存放在js文件目录下，该如何做呢？？？

###### 只要在vue.config.js里面添加配置就可以了

```

const path = require('path')

const IS_PROD = ['development'].includes(process.env.NODE_ENV)

const productionSourceMap = !IS_PROD

const filenameHashing = true

const assetsDir = ''

function resolve(dir) {

return path.join(__dirname, dir)

}

function getAssetPath(assetsDir, filePath) {

return assetsDir ? path.posix.join(assetsDir, filePath) : filePath

}

module.exports = {

// 默认在生成的静态资源文件名中包含hash以控制缓存

filenameHashing: filenameHashing,

chainWebpack: config => {

config.resolve.symlinks(true)

// 移除 prefetch 插件

config.plugins.delete('prefetch')

// 移除 preload 插件

config.plugins.delete('preload')

// 压缩代码

config.optimization.minimize(true)

// 分割代码

config.optimization.splitChunks({

chunks: 'all'

})

// 配置别名

config.resolve.alias

.set('vue$', 'vue/dist/vue.esm.js') //此处使用Compiler，之前为Runtime版本

.set('@', resolve('src'))

.set('assets', resolve('src/assets'))

.set('components', resolve('src/components'))

.set('router', resolve('src/router'))

.set('utils', resolve('src/utils'))

.set('static', resolve('src/static'))

.set('store', resolve('src/store'))

if ( process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {

const isLegacyBundle =

process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD

const filename = getAssetPath(

assetsDir,

`js/[name]${isLegacyBundle ? `-legacy` : ``}${

filenameHashing ? '.[hash:8]' : ''

}.js`

)

config

.mode('development')

.devtool(productionSourceMap ? 'source-map' : false)

.output.filename(filename)

.chunkFilename(filename)

}

lintOnSave: process.env.NODE_ENV === 'development', // 本地开发时开启eslint规范

devServer: {

port: 8080, //端口号

proxy: {

'/admin': {

target: '', //test

timeout: 6 * 60 * 1000,

ws: true, 是否启用websockets

changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

pathRewrite: {

'^/admin': '' //这里重写路径

}

```

vueC-cli3 测试环境打包js文件配置相关推荐

webpack打包js文件的问题
前言这里记录下webpack打包js文件的配置和遇到的问题.因环境版本等不同,解决办法未必都是通用的,仅作为大家参考之用: 我的环境配置 macOS M1 系统 webpack版本:(全局版本)we ...
前端打包js文件的工具 webpack
前端打包js文件的工具 webpack 安装webpack工具 npm install -g webpack webpack-cli 创建js文件用于打包操作即在一个最终的js文件中引入其它的js文 ...
VUE config/index.js文件配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 ...
vue打包js文件混淆加密保护
需求部署到服务器上的vue项目在网页F12之后能看到源码,vue文件啦,js文件啦,都能看到,连我的注释都能看到,这能随便给别人看? 环境 vue 3 vue cli 4 webpack 4 解决方 ...
Webpack5:用webpack打包js文件
前提:node.js和npm已安装好 node.js和npm的安装网上教程一大堆,就不说了,建议初学者将node.js和npm装在c盘,能避免很多操作和麻烦(特指windows用户,有点想买mac了, ...
webpack打包js文件
Webpack安装全局安装 npm install -g webpack webpack-cli 安装后查看版本号 webpack -v 初始化项目创建webpack文件夹进入webpack目录 ...
webpack打包js文件，图片路径错误，没有将图片打包的问题
初用 webpack 进行项目开发的同学会发现:在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中.这时是需要require的方式进行图片路径的引用,这样引用的图片就可以成功打包 ...
linux 设备 major 253,redhat5.5测试环境中使用udev配置raw设备
在redhat 5中,是通过udev来管理raw设备的. 那么udev如何知道raw设备, 就是通过MAJOR和 MINOR. 如果我们只写: ACTION=="add", KER ...
server.js文件配置
var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = ...

vueC-cli3 测试环境打包js文件配置

vueC-cli3 测试环境打包js文件配置相关推荐

最新文章

热门文章