vue.js - 如何将 WebPack 与 VS 集成?
问题描述
几天来,我一直在尝试WebPack
自动构建我的Vue.js
SPA 应用程序,但没有成功。如何在 VS 中按 [F5] 并让 webpack 自动进行构建?
启动.cs
using MyApp.Domain.Repositories;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SpaServices.Webpack;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
namespace MyApp.Api {
public class Startup {
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices (IServiceCollection services) {
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSpaStaticFiles(config => {
config.RootPath = "Client/dist";
});
services.AddSingleton<IUserRepository, InMemoryUserRepository>();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure (IApplicationBuilder app, IHostingEnvironment env, ILogger<Startup> logger) {
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = true
});
}
else {
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc();
app.UseSpa(spa => {});
}
}
}
Webpack 配置
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: { 'main': './Client/src/main.js' },
output: {
path: path.resolve(__dirname, 'Client/dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.html/,
loader: 'file-loader?name=[name].[ext]'
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files
// AND `<script>` blocks in `.vue` files
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory=true',
options: {
presets: ['@babel/preset-env']
}
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
optimization: {
minimizer: [new UglifyJsPlugin()]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin(),
new UglifyJsPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
main.js (vue)
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './site.css';
import './index.html';
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
render: v => v(App),
router
}).$mount('#app');
目前我在 VS 中有一个扩展,我手动运行它来运行 webpack。我尝试了一个旧的 Vue.js 模板(用于 .NET core 2),但经过大量黑客攻击后,如果没有 MVC“视图”,我无法让它工作,我只想使用“Index.html”(默认文件)因为我正在做SPA。
也试过Vue-CLI
了,它自己完美地工作,但在VS里面我最终遇到了同样的问题。
还尝试了https://github.com/soukoku/aspnetcore-vue,这听起来很有希望,但甚至没有启动主页。
解决方案
我不确定 webpack,具体来说,但对于 gulp 和 grunt 之类的东西,任务将在 Visual Studio 的 Task Runner Explorer 中填写。如果您还没有此窗口,请转到查看 > 其他窗口 > 任务运行程序资源管理器。
在窗口内,左侧的下拉列表列出了带有构建脚本的各种项目。选择项目后,将列出找到的任务。您可以右键单击其中任何一个,然后转到 Bindings,您可以在其中选择:Before Build、After Build、Clean Build 和 Project Open。只需选择您喜欢的绑定类型,然后此任务将在该事件上自动运行。
如果您的 webpack 任务不包括在内,您可能需要 Mads Kristensen 的Webpack Task Runner 扩展。它说它支持 VS 2015 和 2017,所以我的假设是支持不是内置的,你需要安装它。完成此操作后,上述过程应该可以正常工作。
推荐阅读
- laravel - 如何在 laravel 中从数据库中获取条带密钥并发布密钥
- javascript - express http服务器应该与rabbitmq消费者解耦吗?
- javascript - 如何按js(react)中的特定字段对地图进行排序?
- c++ - PSS/E 和 C++ 的 Fortran 用户模型接口
- javascript - 我需要修改rowCallback jquery
- ios - WKWebView 检查网页视图是否支持加载文件
- ios - 你能告诉我如何在 kizitonwose/CountryPickerView(github) 的文本字段的左视图中减小标志大小吗
- java - 从 ElasticSearch 获取指定字段
- regex - 用于在两个字符串之间提取文本并在同一文件中修改和替换的 Shell 脚本
- javascript - 无法检查 Chrome 扩展中的局部变量是否为空