网站建设的潜规则,贵阳vi设计公司,有哪些好的网站制作公司,如何做百度免费推广项目背景
Vue2.7.14、vuecli5.0.8、element-ui2.15.13、node14.18.3
vite安装
pnpm add vite4.4.8 -D
入口文件index.html
文件位置修改
将pulic里的index.html移到根目录下
根目录/public/index.html 到 根目录/index.html
文件内容修改
link relicon5.0.8、element-ui2.15.13、node14.18.3
vite安装
pnpm add vite4.4.8 -D
入口文件index.html
文件位置修改
将pulic里的index.html移到根目录下
根目录/public/index.html 到 根目录/index.html
文件内容修改
link relicon href% BASE_URL %favicon.ico #remove
link relicon href/favicon.ico #add
script typemodule src/src/main.js/script #addtitleVue/title title如果是动态的可以引入 vite-plugin-html
vite.config.js
import { defineConfig } from vite
//让浏览器支持commonjs语法
import { viteCommonjs } from originjs/vite-plugin-commonjs
//配置vue
import vue from vitejs/plugin-vue2
import path from path
//兼容require
import vitePluginRequire from vite-plugin-require
//gzip压缩
import viteCompression from vite-plugin-compressionconst REPLACEMENT ${path.resolve(__dirname, ./src)}/export default defineConfig({server: {host: 0.0.0.0,https: false,port: 8080,proxy: {/web: {// 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可target: https://baidu.com:10011, // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURLsecure: false,changeOrigin: true, // 开启代理在本地创建一个虚拟服务端ws: true //, // 是否启用 websockets;}}},resolve: {alias: {utils: ${path.resolve(__dirname, ./src/utils)}/,styles: ${path.resolve(__dirname, ./src/styles)}/,assets: ${path.resolve(__dirname, ./src/assets)}/,: REPLACEMENT,/: REPLACEMENT,src/: REPLACEMENT,vue: vue/dist/vue.esm.js //解决el-table 生产环境不显示},extensions: [.vue, .js, .jsx, .mjs, .ts, .tsx, .json, .css, .scss]},css: {preprocessorOptions: {scss: {additionalData: import /styles/common.scss;}}},build: {minify: terser,sourcemap: false,// 进行压缩计算brotliSize: false,modulePreload: false,chunkSizeWarningLimit: 1000,target: es2015, // 设置目标浏览器的最低版本terserOptions: {compress: {// 打包自动删除consoledrop_console: true,drop_debugger: true},keep_classnames: true},rollupOptions: {output: {// 分包manualChunks(id) {if (id.includes(node_modules)) {return id.toString().split(node_modules/)[1].split(/)[0].toString()}}}}},plugins: [vue(), //配置vueviteCommonjs(),vitePluginRequire(), //兼容requireviteCompression({verbose: true, // 输出压缩成功默认即可disable: false, //开启压缩(不禁用)默认即可deleteOriginFile: false, //删除源文件threshold: 1024, //压缩前最小文件大小algorithm: gzip, //压缩算法ext: .gz // 生成的压缩包后缀})],optimizeDeps: {include: [vue, vuex, sass, vue-router],exclude: [fsevents]}
})package.json
scripts: {dev: vite,build: vite build,build-dev: vite build --mode dev,}, 代码优化
为保险起见上面的东西配置好了之后本地启动检查没问题打包放到测试也没问题接下来开始进行配置优化。
vue.config.js、webpack、vue/cli-service、babel多余的插件和配置开始逐步删除和卸载
删了发现还是正常可以跑的自己检查没啥问题就放心发到测试环境交给测试了 vite打包和启动问题汇总
1、The JSX syntax extension is not currently enabled
The esbuild loader for this file is currently set to js but it must be set to jsx
to be able to parse JSX syntax. You can use loader: { .js: jsx } to do that.
如果是在.vue文件中带有jsx语法, 则在script标签下增加该标识
//.vue文件
script langjsx
2、/src/element-variables.scss Error: Cant find stylesheet to import.
// vite.config.js
css: {preprocessorOptions: {scss: {additionalData: import /styles/common.scss;}}},
3、No matching export in src/utils/dialogUtils.js for import loading
dialogUtils.js 不存在loading,找到对应的.vue文件删除loading 引入
4、Internal server error: Unexpected token (1:0) Uncaught ReferenceError: require is not defined
pnpm i originjs/vite-plugin-commonjs -D
// vite.config.js
import { viteCommonjs } from originjs/vite-plugin-commonjs
plugin:[viteCommonjs()
]
5、[vite] Internal server error: Cant find stylesheet to import.
import ~element-ui/packages/theme-chalk/src/index;
删除 import ~element-ui/packages/theme-chalk/src/index;
使用 import element-ui/lib/theme-chalk/index.css
6、使用qrcodejs2生成二维码报错Cannot read properties of undefined (reading ‘_android‘)
pnpm add qrcodejs2-fix -D
import QRCode from qrcodejs2; //remove
import QRCode from qrcodejs2-fix; //add7、开发环境el-table无法渲染的问题
一开始插件引入了vite-plugin-vue2 --- Vue2.7
后移除改成 vitejs/plugin-vue2 --- Vue2.7
pnpm add vitejs/plugin-vue2 -D
//vite.config.js
import vue from vitejs/plugin-vue2plugins: [vue()
]
8、[ERROR] No loader is configured for .node files: node_modules/fsevents/fsevents.node
// vite.config.js
optimizeDeps: { exclude: [fsevents] },
9、import * as _vite_plugin_require_transform_get_intrinsic_0 from get-intrinsic; var GetIntrinsic _vite_plugin_require_transform_get_intrinsic_0.default || _vite_plugin_require_transform_get_intri...
import * as vite_plugin_require_transform./_1 from ./;
pnpm add vite-plugin-require-transform -D
// vite.config.js
import requireTransform from vite-plugin-require-transform
requireTransform({fileRegex: /.vue$/})
10、第9个搞完后启动没问题、打包报错
pnpm remove vite-plugin-require-transformpnpm add vite-plugin-require-transform -D
import vitePluginRequire from vite-plugin-require;
plugins: [vitePluginRequire()],
11、启动打包到测试环境发现el-table不显示本地没问题
alias: { vue: vue/dist/vue.esm.js },
