vue打包后dist文件有哪些使用NWJS加壳报错？

来源：蜘蛛抓取(WebSpider) 时间：2024-01-29 15:45 标签： vue打包后dist文件有哪些
今天用webpack手动搭建环境的时候，疯狂报错，好大会都进行不了下一步首先是配置package.json
//自动配置
npm init -y一切都没有任何问题然后安装webpack工具
npm install webpack webpack-cli --save-dev
//或者是npm i webpack webpack-cli -D也可以运行webpack测试这一步的时候 我在命令行上敲出webpack 按下回车时 就开始疯狂报错然后最快的方法就是把文件删了重新安装
再来一遍之后还是报错 相同的错误让人头蒙webpack -V 输出之后 发现连版本号都没有输出
后来想了想
是不是 webpack没有全局安装 这个问题 是我觉得最不可能的 因为之前也是用过的然后重新安装webpack和webpack-cli
还是之前的指令
然后手动创建src文件4.运行webpack测试CommonJS规范：基于服务端模块化规范，node产出
抛出：modules.exports
引入：requireES6 module:
import xxx from ''
export default {}因为webpack默认只支持js和json文件的引入 所以如果要在JS中引入其他文件类型 比如.css .png.html等
解析时都需求安装合适的loader来进行解析处理配置各种loader(文件解析器)安装babel相关安装 babel和react相关加载器
cnpm i babel-loader @babel/core @babel/preset-env -D安装css加载器
npm i css-loader style-loader -D
cnpm i css-loader style-loader -D安装HTML插件
npm i html-webpack-plugin -D
cnpm i html-webpack-plugin -DPS：【依赖安装到 开发环境与生产环境的区别】开发环境，即项目的编码阶段需要的依赖，上线后不需要引用，例如：webpack构建工具、babel加载器等，使用 --save-dev 或 -D 命令安装；生产环境，项目上线后开始正式提供对外服务的阶段仍然需要依赖支持，例如：jQuery库、路由等，使用 --save 或 -S 命令安装；
在项目的根目录下创建webpack.config.js配置文件，依次完成以下配置：（1）配置入口（entry）
module.exports = { entry:'./src/index.js' }（2）配置出口（output）
const path = require('path');
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}（3）配置加载器（loader）
module.exports = {
// ...
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.js?$/, // jsx/js文件的正则
exclude: /node_modules/, // 排除 node_modules 文件夹
use:{
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 转义的配置选项
babelrc: false,
presets: [
[require.resolve('@babel/preset-env'), {modules: false}]
],
cacheDirectory: true
}
}
}
]
}
}（4）配置插件（plugin）
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
}执行打包命令
npx webpack --mode development配置 npm run build 命令执行打包操作：
//在 package.json 文件添加 build 项
{
"scripts": {
"build": "webpack --mode production"
}
}执行打包命令：
npm run build搭建本地服务器安装依赖
cnpm i webpack-dev-server -D在webpack.config.js文件中配置本地服务相关信息
module.exports = {
// ...
devServer: {
contentBase: './dist',
host: 'localhost',
port: 3000
}
}
在package.json文件中配置启动命令
{
"scripts": {
"start": "webpack-dev-server --mode development --open"
}
}执行启动服务命令
npm start然后是一些集成与vue集成
vue-loader:解析vue文件
vue-template-compiler
安装：npm install vue-loader vue-template-compiler -D
配置webpack文件： {test:/\.vue$/,use:['vue-loader']},
实例化vueLoaderPlugin插件
const { VueLoaderPlugin }=require('vue-loader')
添加插件实例化：
},
plugins: [
new VueLoaderPlugin()
]与less集成
安装：npm install less-loader less -D
配置：
module: {
rules: [
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
]
},
与sass集成
安装：npm install sass-loader node-sass -D
配置：
module: {
rules: [
{test:/\.(scss|sass)$/,use:['style-loader','css-loader','sass-loader']},
]
},
sass常用语法：https://www.jb51.net/article/222337.htm与vue-router
安装:npm install vue-router -D与vuex的集成安装:npm install vuex -D到此这篇关于webpack搭建vue环境时报错异常解决的文章就介绍到这了,更多相关webpack搭建vue环境时报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
这篇文章主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧前言最近在用webpack+vue写项目，经过几天的熬夜加班改BUG，终于把基本的框架给写完了，后面只要加一些小功能就可以了，太好吧！先来npm run build 打包出来看看吧！打包中...，我们用本地服务器打开看一下。额，不看不知道，一看吓一跳，坑咋这么多呢！但是作为一名积极向上的IT从业者，填坑吧。1.打包之后没有被渲染出来怎么回事，刚打开就告诉我啥也没有，这是要搞事情的前奏啊！，我们看一下错误信息，告诉我路径有问题，默默的看一下自己的地址栏和自己的文件所在目录，原来是我的打包文件没有放到根目录下，这个时候我们可以把我们的两个文件放到根目录下，但是作为一名有个性的IT人士，当然要看有没有其他方法。从上面的路径中隐隐约约有点预感，static是直接相对于根目录，说明这有可能打包的时候，有可能设置了绝对路径，如果我改成相对路径，那不就可以了吗。我们去看一下项目文件下的config>index.js找到里面的build下的assetsPublicPath:'/'，把它改成assetsPublicPath:'./'，加个小点表示相对路径，不加表示绝对路径。npm run build运行。成功。2.路由（router）mode:'history',导致页面不能渲染问题地址栏的那个#怎么那么让我不舒服呢！对于有轻度强迫症的我来说，这是不能忍不了的。我们在项目打包前，开发项目时（npm start），在vueRouter里设置mode:"history".可以去掉#号。这里强行解释一番：路由（router）默认 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，因为对于正常的页面来说，更换URl一定是会导致页面的更换的， 而只有更换URL中的查询字符串和hash值的时候才不会重新加载页面。路由（router）的history模式，这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。没有#号。npm run build打包中....什么鬼，为什么我的路由（router）部分没有被渲染出来，这就是history的坑了，解决方法一，会到以前的hash模式；解决方法二，设置routes里的路由name。这是因为路由（router）无法找到路径中的组件，所以也就无法渲染了。只需要修改 src > router > index.js，在每个path后加上组件名称就行了，这样就可以了。这里有个小问题:为了我们的时间考虑，还是放到根目录吧！首页没有问题了，逐个链接测试一下。这是什么鬼，路径和其他图片路径一样，图片也存在啊，为啥你就是这么傲娇，就是报错。来看一下控制台。结合之前的./原来是相对路径问题，是我的开发文件assets下多个图片文件夹。这个时候为了开发项目的可读性和维护性。只能默默的把前面改的相对路径'./'改回绝对路径'/'了。这就尴尬了，额额额，大家就当没看到哈！暂时遇到这些坑，这是自己写项目的有感而发，希望对看过这篇文章的人有所帮助。总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
一、问题引入这是 user.js 的内容：new Vue({
el: "#app",
data: {
message: "hello vue...."
}
});
感觉没啥问题，但是就是显示不出来：二、问题分析与解决下面列下常见的错误：（1）注意路径的写法：（2）注意对于 use.js 的加载顺序应该放在 vuejs 和 axios 之后或者参考（4）引入参数defer 或者 async：（3）对于引入文件来说，由于执行顺序的原因，需要将引入script 文件写在末尾：（4）不想写在末尾可以对 引入 user.js 的script 添加参数：参数的含义：
async 异步 非同步，即是多线程。加载页面的同时也加载外部引入的文件defer 加载完所有文档后，再加载该引入的文件
分类专栏
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐

我要回帖

更多关于 vue打包后dist文件有哪些 的文章

 

随机推荐